@wirekyt/solid 0.0.1 → 0.0.3

package/dist/json-tree-view.js

@@ -0,0 +1,330 @@
+import { t as __exportAll } from "./rolldown-runtime-D7D4PA-g.js";
+import { d as createContext$1, l as createSplitProps } from "./core-7QKBNp9p.js";
+import { t as wire } from "./factory-D2A7xdtl.js";
+import { a as createTreeCollection } from "./collection-By8qgqkx.js";
+import { C as TreeViewBranch, S as TreeViewBranchContent, T as useTreeViewContext, a as TreeViewRoot, b as TreeViewBranchIndentGuide, h as TreeViewItem, i as TreeViewRootProvider, o as useTreeView, p as TreeViewItemText, r as TreeViewTree, s as TreeViewNodeProvider, v as TreeViewBranchText, x as TreeViewBranchControl, y as TreeViewBranchIndicator } from "./tree-view-ATyeBPXq.js";
+import { For, Index, createMemo, splitProps } from "solid-js";
+import { Dynamic, Index as Index$1, Show as Show$1, createComponent, memo, mergeProps as mergeProps$1, untrack as untrack$1 } from "solid-js/web";
+import { getAccessibleDescription, getRootNode, jsonNodeToElement, keyPathToKey, nodeToString, nodeToValue } from "@wirekyt/dom/json-tree-utils";
+//#region src/components/json-tree-view/get-branch-value.ts
+function getBranchValues(tree, depth) {
+	let values = [];
+	tree.visit({ onEnter: (node, indexPath) => {
+		if (indexPath.length === 0) return;
+		if (tree.isBranchNode(node) && indexPath.length <= depth) values.push(tree.getNodeValue(node));
+	} });
+	return values;
+}
+//#endregion
+//#region src/components/json-tree-view/props-context.ts
+const [JsonTreeViewPropsProvider, useJsonTreeViewPropsContext] = createContext$1({
+	hookName: "useJsonTreeViewPropsContext",
+	providerName: "<JsonTreeViewPropsProvider />"
+});
+//#endregion
+//#region src/components/json-tree-view/root.tsx
+const splitJsonTreeViewProps$1 = createSplitProps();
+const JsonTreeViewRoot = (props) => {
+	const [jsonTreeProps, localProps] = splitJsonTreeViewProps$1(props, [
+		"maxPreviewItems",
+		"collapseStringsAfterLength",
+		"quotesOnKeys",
+		"groupArraysAfterLength",
+		"showNonenumerable"
+	]);
+	const [jsonProps, restProps] = splitProps(localProps, ["data", "defaultExpandedDepth"]);
+	const collection = createMemo(() => {
+		return createTreeCollection({
+			nodeToValue,
+			nodeToString,
+			rootNode: getRootNode(jsonProps.data)
+		});
+	});
+	const defaultExpandedValue = createMemo(() => {
+		return jsonProps.defaultExpandedDepth != null ? getBranchValues(collection(), jsonProps.defaultExpandedDepth) : void 0;
+	});
+	return createComponent(JsonTreeViewPropsProvider, {
+		value: jsonTreeProps,
+		get children() {
+			return createComponent(TreeViewRoot, mergeProps$1({
+				"data-scope": "json-tree-view",
+				get collection() {
+					return collection();
+				},
+				get defaultExpandedValue() {
+					return defaultExpandedValue();
+				}
+			}, restProps, { get children() {
+				return props.children;
+			} }));
+		}
+	});
+};
+//#endregion
+//#region src/components/json-tree-view/root-provider.tsx
+const JsonTreeViewRootProvider = (props) => {
+	const [localProps, restProps] = splitProps(props, ["value"]);
+	const treeView = createMemo(() => {
+		const { options: _, ...rest } = localProps.value();
+		return rest;
+	});
+	return createComponent(JsonTreeViewPropsProvider, {
+		get value() {
+			return localProps.value().options;
+		},
+		get children() {
+			return createComponent(TreeViewRootProvider, mergeProps$1({
+				"data-scope": "json-tree-view",
+				value: treeView
+			}, restProps));
+		}
+	});
+};
+//#endregion
+//#region src/components/json-tree-view/key-node.tsx
+const JsonTreeViewKeyNode = (props) => {
+	const key = createMemo(() => keyPathToKey(props.node.keyPath));
+	return [createComponent(wire.span, {
+		"data-kind": "key",
+		get ["data-non-enumerable"]() {
+			return props.node.isNonEnumerable ? "" : void 0;
+		},
+		get children() {
+			return memo(() => !!props.showQuotes)() ? `"${key()}"` : key();
+		}
+	}), createComponent(wire.span, {
+		"data-kind": "colon",
+		children: ": "
+	})];
+};
+//#endregion
+//#region src/components/json-tree-view/value-node.tsx
+const JsonTreeViewValueNode = (props) => {
+	if (props.node.type === "text") return memo(() => props.renderValue?.(props.node) ?? props.node.value);
+	return createComponent(Dynamic, {
+		get component() {
+			return props.node.tagName;
+		},
+		get ["data-root"]() {
+			return props.node.properties.root ? "" : void 0;
+		},
+		get ["data-type"]() {
+			return props.node.properties.nodeType;
+		},
+		get ["data-kind"]() {
+			return props.node.properties.kind;
+		},
+		get children() {
+			return createComponent(For, {
+				get each() {
+					return props.node.children;
+				},
+				children: (child) => createComponent(JsonTreeViewValueNode, {
+					node: child,
+					get renderValue() {
+						return props.renderValue;
+					}
+				})
+			});
+		}
+	});
+};
+//#endregion
+//#region src/components/json-tree-view/node.tsx
+const scopeProps = { "data-scope": "json-tree-view" };
+function JsonTreeViewNode(props) {
+	const tree = useTreeViewContext();
+	const nodeState = createMemo(() => tree().getNodeState({
+		node: props.node,
+		indexPath: props.indexPath
+	}));
+	const options = useJsonTreeViewPropsContext();
+	const key = createMemo(() => keyPathToKey(props.node.keyPath, { excludeRoot: true }));
+	const valueNode = createMemo(() => jsonNodeToElement(props.node, options));
+	const nodeProps = createMemo(() => {
+		const desc = getAccessibleDescription(props.node);
+		const line = props.indexPath.reduce((acc, curr) => acc + curr, 1);
+		const lineLength = props.indexPath.length - 1;
+		return {
+			...scopeProps,
+			"aria-label": desc,
+			"data-line": line,
+			style: { ["--line-length"]: lineLength }
+		};
+	});
+	return createComponent(TreeViewNodeProvider, {
+		get node() {
+			return props.node;
+		},
+		get indexPath() {
+			return props.indexPath;
+		},
+		get children() {
+			return createComponent(Show$1, {
+				get when() {
+					return nodeState().isBranch;
+				},
+				get fallback() {
+					return createComponent(TreeViewItem, mergeProps$1(nodeProps, { get children() {
+						return createComponent(TreeViewItemText, mergeProps$1(scopeProps, { get children() {
+							return [createComponent(Show$1, {
+								get when() {
+									return key();
+								},
+								get children() {
+									return createComponent(JsonTreeViewKeyNode, {
+										get node() {
+											return props.node;
+										},
+										get showQuotes() {
+											return options.quotesOnKeys;
+										}
+									});
+								}
+							}), createComponent(JsonTreeViewValueNode, {
+								get node() {
+									return valueNode();
+								},
+								get renderValue() {
+									return props.renderValue;
+								}
+							})];
+						} }));
+					} }));
+				},
+				get children() {
+					return createComponent(TreeViewBranch, mergeProps$1(scopeProps, { get children() {
+						return [createComponent(TreeViewBranchControl, mergeProps$1(nodeProps, { get children() {
+							return [createComponent(Show$1, {
+								get when() {
+									return props.arrow;
+								},
+								get children() {
+									return createComponent(TreeViewBranchIndicator, mergeProps$1(scopeProps, { get children() {
+										return props.arrow;
+									} }));
+								}
+							}), createComponent(TreeViewBranchText, mergeProps$1(scopeProps, { get children() {
+								return [createComponent(Show$1, {
+									get when() {
+										return key();
+									},
+									get children() {
+										return createComponent(JsonTreeViewKeyNode, {
+											get node() {
+												return props.node;
+											},
+											get showQuotes() {
+												return options.quotesOnKeys;
+											}
+										});
+									}
+								}), createComponent(JsonTreeViewValueNode, {
+									get node() {
+										return valueNode();
+									},
+									get renderValue() {
+										return props.renderValue;
+									}
+								})];
+							} }))];
+						} })), createComponent(TreeViewBranchContent, mergeProps$1(scopeProps, { get children() {
+							return [createComponent(Show$1, {
+								get when() {
+									return typeof props.indentGuide === "boolean";
+								},
+								get fallback() {
+									return props.indentGuide;
+								},
+								get children() {
+									return createComponent(TreeViewBranchIndentGuide, {});
+								}
+							}), createComponent(Index$1, {
+								get each() {
+									return props.node.children;
+								},
+								children: (child, index) => createComponent(JsonTreeViewNode, mergeProps$1(props, {
+									get node() {
+										return child();
+									},
+									get indexPath() {
+										return [...props.indexPath, index];
+									}
+								}))
+							})];
+						} }))];
+					} }));
+				}
+			});
+		}
+	});
+}
+//#endregion
+//#region src/components/json-tree-view/tree.tsx
+const splitTreeNodeProps = createSplitProps();
+const JsonTreeViewTree = (props) => {
+	const [nodeProps, treeProps] = splitTreeNodeProps(props, [
+		"arrow",
+		"indentGuide",
+		"renderValue"
+	]);
+	const tree = useTreeViewContext();
+	const children = () => tree().collection.getNodeChildren(tree().collection.rootNode);
+	return createComponent(TreeViewTree, mergeProps$1({ "data-scope": "json-tree-view" }, treeProps, { get children() {
+		return createComponent(Index, {
+			get each() {
+				return children();
+			},
+			children: (child, index) => createComponent(JsonTreeViewNode, mergeProps$1({
+				get node() {
+					return child();
+				},
+				indexPath: [index]
+			}, nodeProps))
+		});
+	} }));
+};
+//#endregion
+//#region src/components/json-tree-view/use.ts
+const splitJsonTreeViewProps = createSplitProps();
+const useJsonTreeView = (props) => {
+	const [jsonTreeProps, localProps] = splitJsonTreeViewProps(props, [
+		"maxPreviewItems",
+		"collapseStringsAfterLength",
+		"quotesOnKeys",
+		"groupArraysAfterLength",
+		"showNonenumerable"
+	]);
+	const [jsonProps, restProps] = splitProps(localProps, ["data", "defaultExpandedDepth"]);
+	const collection = createMemo(() => {
+		return createTreeCollection({
+			nodeToValue,
+			nodeToString,
+			rootNode: getRootNode(jsonProps.data)
+		});
+	});
+	const defaultExpandedValue = createMemo(() => {
+		return jsonProps.defaultExpandedDepth != null ? getBranchValues(collection(), jsonProps.defaultExpandedDepth) : void 0;
+	});
+	const treeView = useTreeView(createMemo(() => {
+		return {
+			defaultExpandedValue: untrack$1(defaultExpandedValue),
+			...restProps,
+			collection: collection(),
+			typeahead: false
+		};
+	}));
+	return createMemo(() => ({
+		...treeView(),
+		options: jsonTreeProps
+	}));
+};
+//#endregion
+//#region src/components/json-tree-view/json-tree-view.tsx
+var json_tree_view_exports = /* @__PURE__ */ __exportAll({
+	Root: () => JsonTreeViewRoot,
+	RootProvider: () => JsonTreeViewRootProvider,
+	Tree: () => JsonTreeViewTree
+});
+//#endregion
+export { json_tree_view_exports as JsonTreeView, JsonTreeViewRoot, JsonTreeViewRootProvider, JsonTreeViewTree, useJsonTreeView };

package/dist/json-tree-view.jsx

@@ -0,0 +1,201 @@
+import { t as __exportAll } from "./rolldown-runtime-D7D4PA-g.jsx";
+import { d as createContext$1, l as createSplitProps } from "./core-7QKBNp9p.jsx";
+import { t as wire } from "./factory-DRw_slzE.jsx";
+import { a as createTreeCollection } from "./collection-Mkvw6TyT.jsx";
+import { T as useTreeViewContext, o as useTreeView, t as tree_view_exports } from "./tree-view-CoWx7osT.jsx";
+import { For, Index, createMemo, splitProps } from "solid-js";
+import { Dynamic, Index as Index$1, Show as Show$1, untrack as untrack$1 } from "solid-js/web";
+import { getAccessibleDescription, getRootNode, jsonNodeToElement, keyPathToKey, nodeToString, nodeToValue } from "@wirekyt/dom/json-tree-utils";
+//#region src/components/json-tree-view/get-branch-value.ts
+function getBranchValues(tree, depth) {
+	let values = [];
+	tree.visit({ onEnter: (node, indexPath) => {
+		if (indexPath.length === 0) return;
+		if (tree.isBranchNode(node) && indexPath.length <= depth) values.push(tree.getNodeValue(node));
+	} });
+	return values;
+}
+//#endregion
+//#region src/components/json-tree-view/props-context.ts
+const [JsonTreeViewPropsProvider, useJsonTreeViewPropsContext] = createContext$1({
+	hookName: "useJsonTreeViewPropsContext",
+	providerName: "<JsonTreeViewPropsProvider />"
+});
+//#endregion
+//#region src/components/json-tree-view/root.tsx
+const splitJsonTreeViewProps$1 = createSplitProps();
+const JsonTreeViewRoot = (props) => {
+	const [jsonTreeProps, localProps] = splitJsonTreeViewProps$1(props, [
+		"maxPreviewItems",
+		"collapseStringsAfterLength",
+		"quotesOnKeys",
+		"groupArraysAfterLength",
+		"showNonenumerable"
+	]);
+	const [jsonProps, restProps] = splitProps(localProps, ["data", "defaultExpandedDepth"]);
+	const collection = createMemo(() => {
+		return createTreeCollection({
+			nodeToValue,
+			nodeToString,
+			rootNode: getRootNode(jsonProps.data)
+		});
+	});
+	const defaultExpandedValue = createMemo(() => {
+		return jsonProps.defaultExpandedDepth != null ? getBranchValues(collection(), jsonProps.defaultExpandedDepth) : void 0;
+	});
+	return <JsonTreeViewPropsProvider value={jsonTreeProps}>
+      <tree_view_exports.Root data-scope="json-tree-view" collection={collection()} defaultExpandedValue={defaultExpandedValue()} {...restProps}>
+        {props.children}
+      </tree_view_exports.Root>
+    </JsonTreeViewPropsProvider>;
+};
+//#endregion
+//#region src/components/json-tree-view/root-provider.tsx
+const JsonTreeViewRootProvider = (props) => {
+	const [localProps, restProps] = splitProps(props, ["value"]);
+	const treeView = createMemo(() => {
+		const { options: _, ...rest } = localProps.value();
+		return rest;
+	});
+	return <JsonTreeViewPropsProvider value={localProps.value().options}>
+      <tree_view_exports.RootProvider data-scope="json-tree-view" value={treeView} {...restProps} />
+    </JsonTreeViewPropsProvider>;
+};
+//#endregion
+//#region src/components/json-tree-view/key-node.tsx
+const JsonTreeViewKeyNode = (props) => {
+	const key = createMemo(() => keyPathToKey(props.node.keyPath));
+	return <>
+      <wire.span data-kind="key" data-non-enumerable={props.node.isNonEnumerable ? "" : void 0}>
+        {props.showQuotes ? `"${key()}"` : key()}
+      </wire.span>
+      <wire.span data-kind="colon">: </wire.span>
+    </>;
+};
+//#endregion
+//#region src/components/json-tree-view/value-node.tsx
+const JsonTreeViewValueNode = (props) => {
+	if (props.node.type === "text") return <>{props.renderValue?.(props.node) ?? props.node.value}</>;
+	return <Dynamic component={props.node.tagName} data-root={props.node.properties.root ? "" : void 0} data-type={props.node.properties.nodeType} data-kind={props.node.properties.kind}>
+      <For each={props.node.children}>
+        {(child) => <JsonTreeViewValueNode node={child} renderValue={props.renderValue} />}
+      </For>
+    </Dynamic>;
+};
+//#endregion
+//#region src/components/json-tree-view/node.tsx
+const scopeProps = { "data-scope": "json-tree-view" };
+function JsonTreeViewNode(props) {
+	const tree = useTreeViewContext();
+	const nodeState = createMemo(() => tree().getNodeState({
+		node: props.node,
+		indexPath: props.indexPath
+	}));
+	const options = useJsonTreeViewPropsContext();
+	const key = createMemo(() => keyPathToKey(props.node.keyPath, { excludeRoot: true }));
+	const valueNode = createMemo(() => jsonNodeToElement(props.node, options));
+	const nodeProps = createMemo(() => {
+		const desc = getAccessibleDescription(props.node);
+		const line = props.indexPath.reduce((acc, curr) => acc + curr, 1);
+		const lineLength = props.indexPath.length - 1;
+		return {
+			...scopeProps,
+			"aria-label": desc,
+			"data-line": line,
+			style: { ["--line-length"]: lineLength }
+		};
+	});
+	return <tree_view_exports.NodeProvider node={props.node} indexPath={props.indexPath}>
+      <Show$1 when={nodeState().isBranch} fallback={<tree_view_exports.Item {...nodeProps()}>
+            <tree_view_exports.ItemText {...scopeProps}>
+              <Show$1 when={key()}>
+                <JsonTreeViewKeyNode node={props.node} showQuotes={options.quotesOnKeys} />
+              </Show$1>
+              <JsonTreeViewValueNode node={valueNode()} renderValue={props.renderValue} />
+            </tree_view_exports.ItemText>
+          </tree_view_exports.Item>}>
+        <tree_view_exports.Branch {...scopeProps}>
+          <tree_view_exports.BranchControl {...nodeProps()}>
+            <Show$1 when={props.arrow}>
+              <tree_view_exports.BranchIndicator {...scopeProps}>{props.arrow}</tree_view_exports.BranchIndicator>
+            </Show$1>
+            <tree_view_exports.BranchText {...scopeProps}>
+              <Show$1 when={key()}>
+                <JsonTreeViewKeyNode node={props.node} showQuotes={options.quotesOnKeys} />
+              </Show$1>
+              <JsonTreeViewValueNode node={valueNode()} renderValue={props.renderValue} />
+            </tree_view_exports.BranchText>
+          </tree_view_exports.BranchControl>
+          <tree_view_exports.BranchContent {...scopeProps}>
+            <Show$1 when={typeof props.indentGuide === "boolean"} fallback={props.indentGuide}>
+              <tree_view_exports.BranchIndentGuide />
+            </Show$1>
+            <Index$1 each={props.node.children}>
+              {(child, index) => <JsonTreeViewNode {...props} node={child()} indexPath={[...props.indexPath, index]} />}
+            </Index$1>
+          </tree_view_exports.BranchContent>
+        </tree_view_exports.Branch>
+      </Show$1>
+    </tree_view_exports.NodeProvider>;
+}
+//#endregion
+//#region src/components/json-tree-view/tree.tsx
+const splitTreeNodeProps = createSplitProps();
+const JsonTreeViewTree = (props) => {
+	const [nodeProps, treeProps] = splitTreeNodeProps(props, [
+		"arrow",
+		"indentGuide",
+		"renderValue"
+	]);
+	const tree = useTreeViewContext();
+	const children = () => tree().collection.getNodeChildren(tree().collection.rootNode);
+	return <tree_view_exports.Tree data-scope="json-tree-view" {...treeProps}>
+      <Index each={children()}>
+        {(child, index) => <JsonTreeViewNode node={child()} indexPath={[index]} {...nodeProps} />}
+      </Index>
+    </tree_view_exports.Tree>;
+};
+//#endregion
+//#region src/components/json-tree-view/use.ts
+const splitJsonTreeViewProps = createSplitProps();
+const useJsonTreeView = (props) => {
+	const [jsonTreeProps, localProps] = splitJsonTreeViewProps(props, [
+		"maxPreviewItems",
+		"collapseStringsAfterLength",
+		"quotesOnKeys",
+		"groupArraysAfterLength",
+		"showNonenumerable"
+	]);
+	const [jsonProps, restProps] = splitProps(localProps, ["data", "defaultExpandedDepth"]);
+	const collection = createMemo(() => {
+		return createTreeCollection({
+			nodeToValue,
+			nodeToString,
+			rootNode: getRootNode(jsonProps.data)
+		});
+	});
+	const defaultExpandedValue = createMemo(() => {
+		return jsonProps.defaultExpandedDepth != null ? getBranchValues(collection(), jsonProps.defaultExpandedDepth) : void 0;
+	});
+	const treeView = useTreeView(createMemo(() => {
+		return {
+			defaultExpandedValue: untrack$1(defaultExpandedValue),
+			...restProps,
+			collection: collection(),
+			typeahead: false
+		};
+	}));
+	return createMemo(() => ({
+		...treeView(),
+		options: jsonTreeProps
+	}));
+};
+//#endregion
+//#region src/components/json-tree-view/json-tree-view.tsx
+var json_tree_view_exports = /* @__PURE__ */ __exportAll({
+	Root: () => JsonTreeViewRoot,
+	RootProvider: () => JsonTreeViewRootProvider,
+	Tree: () => JsonTreeViewTree
+});
+//#endregion
+export { json_tree_view_exports as JsonTreeView, JsonTreeViewRoot, JsonTreeViewRootProvider, JsonTreeViewTree, useJsonTreeView };

package/dist/listbox.d.ts

@@ -0,0 +1,109 @@
+import { a as Optional, n as Assign, r as MaybeAccessor, s as PropTypes } from "./index-ClU-Lb8Z.js";
+import { r as PolymorphicProps, t as HTMLProps } from "./factory-wuwfJqbU.js";
+import { _ as CollectionItem, b as createListCollection, y as ListCollection } from "./index-CJwZCGOS.js";
+import { Accessor, JSX } from "solid-js";
+import * as listbox from "@wirekyt/dom/machines/listbox";
+import { HighlightChangeDetails, HighlightChangeDetails as ListboxHighlightChangeDetails, InputProps, ItemProps, ItemState, ScrollToIndexDetails, ScrollToIndexDetails as ListboxScrollToIndexDetails, SelectionDetails, SelectionDetails as ListboxSelectionDetails, SelectionMode, SelectionMode as ListboxSelectionMode, ValueChangeDetails, ValueChangeDetails as ListboxValueChangeDetails } from "@wirekyt/dom/machines/listbox";
+import { JSX as JSX$1 } from "solid-js/jsx-runtime";
+//#region src/components/listbox/use.d.ts
+interface UseListboxProps<T extends CollectionItem> extends Optional<Omit<listbox.Props<T>, "dir" | "getRootNode" | "collection">, "id"> {
+  collection: ListCollection<T>;
+}
+interface UseListboxReturn<T extends CollectionItem> extends Accessor<listbox.Api<PropTypes, T>> {}
+declare const useListbox: <T extends CollectionItem>(props: MaybeAccessor<UseListboxProps<T>>) => UseListboxReturn<T>;
+//#endregion
+//#region src/components/listbox/use-context.d.ts
+interface UseListboxContext<T extends CollectionItem> extends UseListboxReturn<T> {}
+declare const ListboxProvider: import("solid-js").ContextProviderComponent<UseListboxContext<any>>, useListboxContext: () => UseListboxContext<any>;
+//#endregion
+//#region src/components/listbox/context.d.ts
+interface ListboxContextProps<T extends CollectionItem> {
+  children: (context: UseListboxContext<T>) => JSX.Element;
+}
+declare function ListboxContext<T extends CollectionItem>(props: ListboxContextProps<T>): JSX.Element;
+//#endregion
+//#region src/components/listbox/content.d.ts
+interface ListboxContentBaseProps extends PolymorphicProps<"div"> {}
+interface ListboxContentProps extends HTMLProps<"div">, ListboxContentBaseProps {}
+declare const ListboxContent: (props: ListboxContentProps) => import("solid-js").JSX.Element;
+//#endregion
+//#region src/components/listbox/empty.d.ts
+interface ListboxEmptyBaseProps extends PolymorphicProps<"div"> {}
+interface ListboxEmptyProps extends HTMLProps<"div">, ListboxEmptyBaseProps {}
+declare const ListboxEmpty: (props: ListboxEmptyProps) => import("solid-js").JSX.Element;
+//#endregion
+//#region src/components/listbox/input.d.ts
+interface ListboxInputBaseProps extends InputProps, PolymorphicProps<"input"> {}
+interface ListboxInputProps extends HTMLProps<"input">, ListboxInputBaseProps {}
+declare const ListboxInput: (props: ListboxInputProps) => import("solid-js").JSX.Element;
+//#endregion
+//#region src/components/listbox/item.d.ts
+interface ListboxItemBaseProps extends ItemProps, PolymorphicProps<"div"> {}
+interface ListboxItemProps extends HTMLProps<"div">, ListboxItemBaseProps {}
+declare const ListboxItem: (props: ListboxItemProps) => import("solid-js").JSX.Element;
+//#endregion
+//#region src/components/listbox/use-item-context.d.ts
+interface UseListboxItemContext extends ItemState {}
+declare const ListboxItemProvider: import("solid-js").ContextProviderComponent<UseListboxItemContext>, useListboxItemContext: () => UseListboxItemContext;
+//#endregion
+//#region src/components/listbox/item-context.d.ts
+interface ListboxItemContextProps {
+  children: (context: UseListboxItemContext) => JSX.Element;
+}
+declare function ListboxItemContext(props: ListboxItemContextProps): JSX.Element;
+//#endregion
+//#region src/components/listbox/item-group.d.ts
+interface ListboxItemGroupBaseProps extends PolymorphicProps<"div"> {}
+interface ListboxItemGroupProps extends HTMLProps<"div">, ListboxItemGroupBaseProps {}
+declare const ListboxItemGroup: (props: ListboxItemGroupProps) => import("solid-js").JSX.Element;
+//#endregion
+//#region src/components/listbox/item-group-label.d.ts
+interface ListboxItemGroupLabelBaseProps extends PolymorphicProps<"div"> {}
+interface ListboxItemGroupLabelProps extends HTMLProps<"div">, ListboxItemGroupLabelBaseProps {}
+declare const ListboxItemGroupLabel: (props: ListboxItemGroupLabelProps) => import("solid-js").JSX.Element;
+//#endregion
+//#region src/components/listbox/item-indicator.d.ts
+interface ListboxItemIndicatorBaseProps extends PolymorphicProps<"div"> {}
+interface ListboxItemIndicatorProps extends HTMLProps<"div">, ListboxItemIndicatorBaseProps {}
+declare const ListboxItemIndicator: (props: ListboxItemIndicatorProps) => import("solid-js").JSX.Element;
+//#endregion
+//#region src/components/listbox/item-text.d.ts
+interface ListboxItemTextBaseProps extends PolymorphicProps<"div"> {}
+interface ListboxItemTextProps extends HTMLProps<"div">, ListboxItemTextBaseProps {}
+declare const ListboxItemText: (props: ListboxItemTextProps) => import("solid-js").JSX.Element;
+//#endregion
+//#region src/components/listbox/label.d.ts
+interface ListboxLabelBaseProps extends PolymorphicProps<"span"> {}
+interface ListboxLabelProps extends HTMLProps<"span">, ListboxLabelBaseProps {}
+declare const ListboxLabel: (props: ListboxLabelProps) => import("solid-js").JSX.Element;
+//#endregion
+//#region src/components/listbox/root.d.ts
+interface ListboxRootBaseProps<T extends CollectionItem> extends UseListboxProps<T>, PolymorphicProps<"div"> {}
+interface ListboxRootProps<T extends CollectionItem> extends Assign<HTMLProps<"div">, ListboxRootBaseProps<T>> {}
+declare const ListboxRoot: <T extends CollectionItem>(props: ListboxRootProps<T>) => import("solid-js").JSX.Element;
+type ListboxRootComponentProps<T extends CollectionItem = CollectionItem, P = {}> = Assign<ListboxRootProps<T>, P>;
+type ListboxRootComponent<P = {}> = <T extends CollectionItem>(props: ListboxRootComponentProps<T, P>) => any;
+//#endregion
+//#region src/components/listbox/root-provider.d.ts
+interface RootProviderProps<T extends CollectionItem> {
+  value: UseListboxReturn<T>;
+}
+interface ListboxRootProviderBaseProps<T extends CollectionItem> extends RootProviderProps<T>, PolymorphicProps<"div"> {}
+interface ListboxRootProviderProps<T extends CollectionItem> extends HTMLProps<"div">, ListboxRootProviderBaseProps<T> {}
+declare const ListboxRootProvider: <T extends CollectionItem>(props: ListboxRootProviderProps<T>) => JSX$1.Element;
+type ListboxRootProviderComponent<P = {}> = <T extends CollectionItem>(props: Assign<ListboxRootProviderProps<T>, P>) => JSX$1.Element;
+//#endregion
+//#region src/components/listbox/value-text.d.ts
+interface ListboxValueTextBaseProps extends PolymorphicProps<"span"> {
+  placeholder?: string;
+}
+interface ListboxValueTextProps extends HTMLProps<"span">, ListboxValueTextBaseProps {}
+declare const ListboxValueText: (props: ListboxValueTextProps) => import("solid-js").JSX.Element;
+//#endregion
+//#region src/components/listbox/anatomy.d.ts
+declare const listboxAnatomy: import("@wirekyt/dom/anatomy").AnatomyInstance<"input" | "label" | "root" | "item" | "itemText" | "itemGroup" | "content" | "valueText" | "itemIndicator" | "itemGroupLabel" | "empty">;
+declare namespace listbox_d_exports {
+  export { ListboxContent as Content, ListboxContentBaseProps as ContentBaseProps, ListboxContentProps as ContentProps, ListboxContext as Context, ListboxContextProps as ContextProps, ListboxEmpty as Empty, ListboxEmptyBaseProps as EmptyBaseProps, ListboxEmptyProps as EmptyProps, HighlightChangeDetails, ListboxInput as Input, ListboxInputBaseProps as InputBaseProps, ListboxInputProps as InputProps, ListboxItem as Item, ListboxItemBaseProps as ItemBaseProps, ListboxItemContext as ItemContext, ListboxItemContextProps as ItemContextProps, ListboxItemGroup as ItemGroup, ListboxItemGroupBaseProps as ItemGroupBaseProps, ListboxItemGroupLabel as ItemGroupLabel, ListboxItemGroupLabelBaseProps as ItemGroupLabelBaseProps, ListboxItemGroupLabelProps as ItemGroupLabelProps, ListboxItemGroupProps as ItemGroupProps, ListboxItemIndicator as ItemIndicator, ListboxItemIndicatorBaseProps as ItemIndicatorBaseProps, ListboxItemIndicatorProps as ItemIndicatorProps, ListboxItemProps as ItemProps, ListboxItemText as ItemText, ListboxItemTextBaseProps as ItemTextBaseProps, ListboxItemTextProps as ItemTextProps, ListboxLabel as Label, ListboxLabelBaseProps as LabelBaseProps, ListboxLabelProps as LabelProps, ListboxRoot as Root, ListboxRootBaseProps as RootBaseProps, ListboxRootComponent as RootComponent, ListboxRootComponentProps as RootComponentProps, ListboxRootProps as RootProps, ListboxRootProvider as RootProvider, ListboxRootProviderBaseProps as RootProviderBaseProps, ListboxRootProviderComponent as RootProviderComponent, ListboxRootProviderProps as RootProviderProps, ScrollToIndexDetails, SelectionDetails, SelectionMode, ValueChangeDetails, ListboxValueText as ValueText, ListboxValueTextBaseProps as ValueTextBaseProps, ListboxValueTextProps as ValueTextProps };
+}
+//#endregion
+export { type CollectionItem, type ListCollection, listbox_d_exports as Listbox, ListboxContent, type ListboxContentBaseProps, type ListboxContentProps, ListboxContext, type ListboxContextProps, ListboxEmpty, type ListboxEmptyBaseProps, type ListboxEmptyProps, type ListboxHighlightChangeDetails, ListboxInput, type ListboxInputBaseProps, type ListboxInputProps, ListboxItem, type ListboxItemBaseProps, ListboxItemContext, type ListboxItemContextProps, ListboxItemGroup, type ListboxItemGroupBaseProps, ListboxItemGroupLabel, type ListboxItemGroupLabelBaseProps, type ListboxItemGroupLabelProps, type ListboxItemGroupProps, ListboxItemIndicator, type ListboxItemIndicatorBaseProps, type ListboxItemIndicatorProps, type ListboxItemProps, ListboxItemText, type ListboxItemTextBaseProps, type ListboxItemTextProps, ListboxLabel, type ListboxLabelBaseProps, type ListboxLabelProps, ListboxRoot, type ListboxRootBaseProps, type ListboxRootComponent, type ListboxRootComponentProps, type ListboxRootProps, ListboxRootProvider, type ListboxRootProviderBaseProps, type ListboxRootProviderComponent, type ListboxRootProviderProps, type ListboxScrollToIndexDetails, type ListboxSelectionDetails, type ListboxSelectionMode, type ListboxValueChangeDetails, ListboxValueText, type ListboxValueTextBaseProps, type ListboxValueTextProps, type UseListboxContext, type UseListboxItemContext, type UseListboxProps, type UseListboxReturn, createListCollection, listboxAnatomy, useListbox, useListboxContext, useListboxItemContext };