@simple-base/solid 0.1.0

package/dist/index.js

@@ -0,0 +1,941 @@
+import { Portal, createComponent, effect, insert, memo, mergeProps, spread, template, use } from "solid-js/web";
+import { For, Show, createContext, createEffect, createMemo, createSignal, createUniqueId, on, onCleanup, onMount, splitProps, useContext } from "solid-js";
+import { cn } from "cn";
+import { badgeDefaults, buttonDefaults } from "@simple-base/contracts";
+import * as combobox from "@zag-js/combobox";
+import { mergeProps as mergeProps$1, normalizeProps, useMachine } from "@zag-js/solid";
+import * as select from "@zag-js/select";
+//#region src/components/AlertDialog.tsx
+var _tmpl$$10 = /*#__PURE__*/ template(`<dialog>`);
+var _tmpl$2$3 = /*#__PURE__*/ template(`<div>`);
+var _tmpl$3$3 = /*#__PURE__*/ template(`<p>`);
+var _tmpl$4$3 = /*#__PURE__*/ template(`<h3>`);
+const AlertDialogContext = createContext(null);
+function useAlertDialog() {
+	const context = useContext(AlertDialogContext);
+	if (!context) throw new Error("useAlertDialog must be used within an AlertDialogRoot");
+	return context;
+}
+function AlertDialogRoot(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	const id = createUniqueId();
+	const titleId = `${id}-title`;
+	const descriptionId = `${id}-description`;
+	return createComponent(AlertDialogContext.Provider, {
+		value: {
+			titleId,
+			descriptionId
+		},
+		get children() {
+			var _el$ = _tmpl$$10();
+			spread(_el$, mergeProps(rest, {
+				"role": "alertdialog",
+				"aria-labelledby": titleId,
+				"aria-describedby": descriptionId,
+				get ["class"]() {
+					return cn("sb-alert-dialog", local.class);
+				}
+			}), false, false);
+			return _el$;
+		}
+	});
+}
+function AlertDialogIcon(props) {
+	const [local, rest] = splitProps(props, ["class", "aria-hidden"]);
+	return (() => {
+		var _el$2 = _tmpl$2$3();
+		spread(_el$2, mergeProps(rest, {
+			get ["aria-hidden"]() {
+				return local["aria-hidden"] ?? true;
+			},
+			get ["class"]() {
+				return cn("sb-alert-dialog-icon", local.class);
+			}
+		}), false, false);
+		return _el$2;
+	})();
+}
+function AlertDialogContent(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return (() => {
+		var _el$3 = _tmpl$2$3();
+		spread(_el$3, mergeProps(rest, { get ["class"]() {
+			return cn("sb-alert-dialog-content", local.class);
+		} }), false, false);
+		return _el$3;
+	})();
+}
+function AlertDialogKicker(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return (() => {
+		var _el$4 = _tmpl$3$3();
+		spread(_el$4, mergeProps(rest, { get ["class"]() {
+			return cn("sb-alert-dialog-kicker", local.class);
+		} }), false, false);
+		return _el$4;
+	})();
+}
+function AlertDialogTitle(props) {
+	const { titleId } = useAlertDialog();
+	const [local, rest] = splitProps(props, ["class"]);
+	return (() => {
+		var _el$5 = _tmpl$4$3();
+		spread(_el$5, mergeProps(rest, {
+			"id": titleId,
+			get ["class"]() {
+				return cn("sb-alert-dialog-title", local.class);
+			}
+		}), false, false);
+		return _el$5;
+	})();
+}
+function AlertDialogDescription(props) {
+	const { descriptionId } = useAlertDialog();
+	const [local, rest] = splitProps(props, ["class"]);
+	return (() => {
+		var _el$6 = _tmpl$3$3();
+		spread(_el$6, mergeProps(rest, {
+			"id": descriptionId,
+			get ["class"]() {
+				return cn("sb-alert-dialog-description", local.class);
+			}
+		}), false, false);
+		return _el$6;
+	})();
+}
+function AlertDialogActions(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return (() => {
+		var _el$7 = _tmpl$2$3();
+		spread(_el$7, mergeProps(rest, { get ["class"]() {
+			return cn("sb-alert-dialog-actions", local.class);
+		} }), false, false);
+		return _el$7;
+	})();
+}
+const AlertDialog = Object.assign(AlertDialogRoot, {
+	Icon: AlertDialogIcon,
+	Content: AlertDialogContent,
+	Kicker: AlertDialogKicker,
+	Title: AlertDialogTitle,
+	Description: AlertDialogDescription,
+	Actions: AlertDialogActions
+});
+//#endregion
+//#region src/components/Badge.tsx
+var _tmpl$$9 = /*#__PURE__*/ template(`<span>`);
+function Badge(props) {
+	const [local, rest] = splitProps(props, [
+		"class",
+		"variant",
+		"size"
+	]);
+	return (() => {
+		var _el$ = _tmpl$$9();
+		spread(_el$, mergeProps(rest, {
+			get ["class"]() {
+				return cn("sb-badge", local.class);
+			},
+			get ["data-variant"]() {
+				return local.variant ?? badgeDefaults.variant;
+			},
+			get ["data-size"]() {
+				return local.size ?? badgeDefaults.size;
+			}
+		}), false, false);
+		return _el$;
+	})();
+}
+//#endregion
+//#region src/components/Button.tsx
+var _tmpl$$8 = /*#__PURE__*/ template(`<button>`);
+function Button(props) {
+	const [local, rest] = splitProps(props, [
+		"class",
+		"variant",
+		"size"
+	]);
+	return (() => {
+		var _el$ = _tmpl$$8();
+		spread(_el$, mergeProps(rest, {
+			get ["class"]() {
+				return cn("sb-button", local.class);
+			},
+			get ["data-variant"]() {
+				return local.variant ?? buttonDefaults.variant;
+			},
+			get ["data-size"]() {
+				return local.size ?? buttonDefaults.size;
+			}
+		}), false, false);
+		return _el$;
+	})();
+}
+//#endregion
+//#region src/components/Switch.tsx
+var _tmpl$$7 = /*#__PURE__*/ template(`<input>`);
+function Switch(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return (() => {
+		var _el$ = _tmpl$$7();
+		spread(_el$, mergeProps(rest, {
+			"type": "checkbox",
+			"role": "switch",
+			get ["class"]() {
+				return cn("sb-switch", local.class);
+			}
+		}), false, false);
+		return _el$;
+	})();
+}
+//#endregion
+//#region src/components/Checkbox.tsx
+var _tmpl$$6 = /*#__PURE__*/ template(`<input>`);
+function Checkbox(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return (() => {
+		var _el$ = _tmpl$$6();
+		spread(_el$, mergeProps(rest, {
+			"type": "checkbox",
+			get ["class"]() {
+				return cn("sb-checkbox", local.class);
+			}
+		}), false, false);
+		return _el$;
+	})();
+}
+//#endregion
+//#region src/components/Input.tsx
+var _tmpl$$5 = /*#__PURE__*/ template(`<input>`);
+function Input(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return (() => {
+		var _el$ = _tmpl$$5();
+		spread(_el$, mergeProps(rest, { get ["class"]() {
+			return cn("sb-input", local.class);
+		} }), false, false);
+		return _el$;
+	})();
+}
+//#endregion
+//#region src/components/Radio.tsx
+var _tmpl$$4 = /*#__PURE__*/ template(`<input>`);
+function Radio(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return (() => {
+		var _el$ = _tmpl$$4();
+		spread(_el$, mergeProps(rest, {
+			"type": "radio",
+			get ["class"]() {
+				return cn("sb-radio", local.class);
+			}
+		}), false, false);
+		return _el$;
+	})();
+}
+//#endregion
+//#region src/components/TextArea.tsx
+var _tmpl$$3 = /*#__PURE__*/ template(`<textarea>`);
+function TextArea(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return (() => {
+		var _el$ = _tmpl$$3();
+		spread(_el$, mergeProps(rest, { get ["class"]() {
+			return cn("sb-textarea", local.class);
+		} }), false, false);
+		return _el$;
+	})();
+}
+//#endregion
+//#region src/mergeWidgetProps.ts
+const hyphenate = (property) => property.startsWith("--") ? property : property.replace(/[A-Z]/g, (char) => `-${char.toLowerCase()}`);
+const serializeStyle = (style) => {
+	if (typeof style === "string") return style;
+	let css = "";
+	for (const property in style) {
+		const value = style[property];
+		if (value == null || value === "") continue;
+		const declaration = `${hyphenate(property)}: ${value}`;
+		css = css ? `${css};${declaration}` : declaration;
+	}
+	return css;
+};
+const composeStyles = (widgetStyle, consumerStyle) => {
+	if (consumerStyle == null) return widgetStyle;
+	if (widgetStyle == null) return consumerStyle;
+	const widgetCss = serializeStyle(widgetStyle);
+	const consumerCss = serializeStyle(consumerStyle);
+	if (!widgetCss) return consumerStyle;
+	if (!consumerCss) return widgetStyle;
+	return `${widgetCss};${consumerCss}`;
+};
+function mergeWidgetProps(behavior, props) {
+	const normalized = new Proxy(props, { get(target, key, receiver) {
+		const value = Reflect.get(target, key, receiver);
+		if (typeof key === "string" && key.startsWith("on") && Array.isArray(value) && typeof value[0] === "function") return (event) => value[0](value[1], event);
+		return value;
+	} });
+	const { style: widgetStyle, ...behaviorProps } = behavior;
+	const { style: consumerStyle, ...consumerProps } = normalized;
+	const merged = mergeProps$1(behaviorProps, consumerProps);
+	const style = composeStyles(widgetStyle, consumerStyle);
+	return style === void 0 ? merged : {
+		...merged,
+		style
+	};
+}
+//#endregion
+//#region src/components/Combobox.tsx
+var _tmpl$$2 = /*#__PURE__*/ template(`<div>`);
+var _tmpl$2$2 = /*#__PURE__*/ template(`<label>`);
+var _tmpl$3$2 = /*#__PURE__*/ template(`<input>`);
+var _tmpl$4$2 = /*#__PURE__*/ template(`<button>`);
+var _tmpl$5$2 = /*#__PURE__*/ template(`<ul>`);
+var _tmpl$6$2 = /*#__PURE__*/ template(`<li>`);
+const ComboboxContext = createContext(null);
+function useCombobox() {
+	const context = useContext(ComboboxContext);
+	if (!context) throw new Error("useCombobox must be used within a Combobox");
+	return context;
+}
+function ComboboxRoot(props) {
+	const [local, rest] = splitProps(props, [
+		"class",
+		"children",
+		"id",
+		"label",
+		"name",
+		"placeholder",
+		"options",
+		"value",
+		"disabled",
+		"placement",
+		"invalid",
+		"required",
+		"onValueChange",
+		"onOpenChange"
+	]);
+	const [query, setQuery] = createSignal("");
+	const options = createMemo(() => {
+		const search = query().toLowerCase();
+		return local.options.filter((option) => option.label.toLowerCase().includes(search));
+	});
+	const collection = createMemo(() => combobox.collection({
+		items: options(),
+		itemToValue: (item) => item.value,
+		itemToString: (item) => item.label,
+		isItemDisabled: (item) => item.disabled ?? false
+	}));
+	const positioning = createMemo(() => local.placement ? { placement: local.placement } : void 0);
+	const service = useMachine(combobox.machine, {
+		get id() {
+			return local.id;
+		},
+		get ids() {
+			return { root: local.id };
+		},
+		get name() {
+			return local.name;
+		},
+		get placeholder() {
+			return local.placeholder;
+		},
+		get disabled() {
+			return local.disabled;
+		},
+		get invalid() {
+			return local.invalid;
+		},
+		get required() {
+			return local.required;
+		},
+		get value() {
+			if (local.value === void 0) return void 0;
+			return local.value === "" ? [] : [local.value];
+		},
+		get positioning() {
+			return positioning();
+		},
+		get collection() {
+			return collection();
+		},
+		onOpenChange({ open, reason }) {
+			if (open && reason !== "input-change") setQuery("");
+			local.onOpenChange?.(open);
+		},
+		onInputValueChange({ inputValue, reason }) {
+			setQuery(reason === "input-change" ? inputValue : "");
+		},
+		onValueChange({ value }) {
+			local.onValueChange(value[0] ?? "");
+		}
+	});
+	const api = createMemo(() => combobox.connect(service, normalizeProps));
+	return createComponent(ComboboxContext.Provider, {
+		value: {
+			label: () => local.label,
+			options,
+			api
+		},
+		get children() {
+			var _el$ = _tmpl$$2();
+			spread(_el$, mergeProps(() => mergeWidgetProps(api().getRootProps(), rest), { get ["class"]() {
+				return cn("sb-combobox", local.class);
+			} }), false, true);
+			insert(_el$, () => local.children);
+			return _el$;
+		}
+	});
+}
+function ComboboxLabel(props) {
+	const { api, label } = useCombobox();
+	const [local, rest] = splitProps(props, ["class", "children"]);
+	return (() => {
+		var _el$2 = _tmpl$2$2();
+		spread(_el$2, mergeProps(() => mergeWidgetProps(api().getLabelProps(), rest), { get ["class"]() {
+			return cn("sb-combobox-label", local.class);
+		} }), false, true);
+		insert(_el$2, () => local.children ?? label());
+		return _el$2;
+	})();
+}
+function ComboboxControl(props) {
+	const { api } = useCombobox();
+	const [local, rest] = splitProps(props, ["class", "children"]);
+	return (() => {
+		var _el$3 = _tmpl$$2();
+		spread(_el$3, mergeProps(() => mergeWidgetProps(api().getControlProps(), rest), { get ["class"]() {
+			return cn("sb-combobox-control", local.class);
+		} }), false, true);
+		insert(_el$3, () => local.children);
+		return _el$3;
+	})();
+}
+function ComboboxInput(props) {
+	const { api, label } = useCombobox();
+	const [local, rest] = splitProps(props, ["class"]);
+	return (() => {
+		var _el$4 = _tmpl$3$2();
+		spread(_el$4, mergeProps({ get ["aria-label"]() {
+			return label();
+		} }, () => mergeWidgetProps(api().getInputProps(), rest), { get ["class"]() {
+			return cn("sb-combobox-input", local.class);
+		} }), false, false);
+		return _el$4;
+	})();
+}
+function ComboboxTrigger(props) {
+	const { api } = useCombobox();
+	const [local, rest] = splitProps(props, ["class", "children"]);
+	return (() => {
+		var _el$5 = _tmpl$4$2();
+		spread(_el$5, mergeProps(() => mergeWidgetProps(api().getTriggerProps(), rest), { get ["class"]() {
+			return cn("sb-combobox-trigger", local.class);
+		} }), false, true);
+		insert(_el$5, () => local.children);
+		return _el$5;
+	})();
+}
+function ComboboxPortal(props) {
+	return createComponent(Portal, {
+		get mount() {
+			return props.mount;
+		},
+		get children() {
+			return props.children;
+		}
+	});
+}
+function ComboboxPositioner(props) {
+	const { api } = useCombobox();
+	const [local, rest] = splitProps(props, ["class", "children"]);
+	return (() => {
+		var _el$6 = _tmpl$$2();
+		spread(_el$6, mergeProps(() => mergeWidgetProps(api().getPositionerProps(), rest), { get ["class"]() {
+			return cn("sb-combobox-positioner", local.class);
+		} }), false, true);
+		insert(_el$6, () => local.children);
+		return _el$6;
+	})();
+}
+function ComboboxContent(props) {
+	const { api } = useCombobox();
+	const [local, rest] = splitProps(props, ["class", "children"]);
+	return (() => {
+		var _el$7 = _tmpl$$2();
+		spread(_el$7, mergeProps({ get hidden() {
+			return !api().open;
+		} }, rest, { get ["class"]() {
+			return cn("sb-combobox-content", local.class);
+		} }), false, true);
+		insert(_el$7, () => local.children);
+		return _el$7;
+	})();
+}
+function ComboboxList(props) {
+	const { api, options, label } = useCombobox();
+	const [local, rest] = splitProps(props, ["class", "children"]);
+	return (() => {
+		var _el$8 = _tmpl$5$2();
+		spread(_el$8, mergeProps({ get ["aria-label"]() {
+			return label();
+		} }, () => mergeWidgetProps(api().getContentProps(), rest), { get ["class"]() {
+			return cn("sb-combobox-list", local.class);
+		} }), false, true);
+		insert(_el$8, createComponent(For, {
+			get each() {
+				return options();
+			},
+			children: (option) => local.children(option)
+		}));
+		return _el$8;
+	})();
+}
+function ComboboxEmpty(props) {
+	const { api, options } = useCombobox();
+	const [local, rest] = splitProps(props, ["class", "children"]);
+	return createComponent(Show, {
+		get when() {
+			return memo(() => !!api().open)() && options().length === 0;
+		},
+		get children() {
+			var _el$9 = _tmpl$$2();
+			spread(_el$9, mergeProps(rest, {
+				"role": "status",
+				get ["class"]() {
+					return cn("sb-combobox-empty", local.class);
+				}
+			}), false, true);
+			insert(_el$9, () => local.children);
+			return _el$9;
+		}
+	});
+}
+function ComboboxItem(props) {
+	const { api } = useCombobox();
+	const [local, rest] = splitProps(props, ["class", "option"]);
+	return (() => {
+		var _el$0 = _tmpl$6$2();
+		spread(_el$0, mergeProps(() => mergeWidgetProps(api().getItemProps({ item: local.option }), rest), { get ["class"]() {
+			return cn("sb-combobox-item", local.class);
+		} }), false, true);
+		insert(_el$0, () => local.option.label);
+		return _el$0;
+	})();
+}
+const Combobox = Object.assign(ComboboxRoot, {
+	Root: ComboboxRoot,
+	Label: ComboboxLabel,
+	Control: ComboboxControl,
+	Input: ComboboxInput,
+	Trigger: ComboboxTrigger,
+	Portal: ComboboxPortal,
+	Positioner: ComboboxPositioner,
+	Content: ComboboxContent,
+	List: ComboboxList,
+	Empty: ComboboxEmpty,
+	Item: ComboboxItem
+});
+//#endregion
+//#region src/components/Select.tsx
+var _tmpl$$1 = /*#__PURE__*/ template(`<div><select>`);
+var _tmpl$2$1 = /*#__PURE__*/ template(`<option>`);
+var _tmpl$3$1 = /*#__PURE__*/ template(`<label>`);
+var _tmpl$4$1 = /*#__PURE__*/ template(`<div>`);
+var _tmpl$5$1 = /*#__PURE__*/ template(`<button>`);
+var _tmpl$6$1 = /*#__PURE__*/ template(`<span>`);
+var _tmpl$7$1 = /*#__PURE__*/ template(`<ul>`);
+var _tmpl$8$1 = /*#__PURE__*/ template(`<li>`);
+const SelectContext = createContext(null);
+function useSelect() {
+	const context = useContext(SelectContext);
+	if (!context) throw new Error("useSelect must be used within a Select");
+	return context;
+}
+function SelectRoot(props) {
+	const [local, rest] = splitProps(props, [
+		"class",
+		"children",
+		"id",
+		"label",
+		"name",
+		"placeholder",
+		"options",
+		"value",
+		"disabled",
+		"placement",
+		"invalid",
+		"required",
+		"onValueChange",
+		"onOpenChange"
+	]);
+	const collection = createMemo(() => select.collection({
+		items: local.options,
+		itemToValue: (item) => item.value,
+		itemToString: (item) => item.label,
+		isItemDisabled: (item) => item.disabled ?? false
+	}));
+	const positioning = createMemo(() => local.placement ? { placement: local.placement } : void 0);
+	const service = useMachine(select.machine, {
+		get id() {
+			return local.id;
+		},
+		get ids() {
+			return { root: local.id };
+		},
+		get name() {
+			return local.name;
+		},
+		get disabled() {
+			return local.disabled;
+		},
+		get invalid() {
+			return local.invalid;
+		},
+		get required() {
+			return local.required;
+		},
+		get value() {
+			if (local.value === void 0) return void 0;
+			return local.value === "" ? [] : [local.value];
+		},
+		get positioning() {
+			return positioning();
+		},
+		get collection() {
+			return collection();
+		},
+		onOpenChange({ open }) {
+			local.onOpenChange?.(open);
+		},
+		onValueChange({ value }) {
+			local.onValueChange(value[0] ?? "");
+		}
+	});
+	const api = createMemo(() => select.connect(service, normalizeProps));
+	let hiddenSelect;
+	const syncHiddenSelect = () => {
+		hiddenSelect.value = api().value[0] ?? "";
+	};
+	createEffect(on([collection, () => api().value], syncHiddenSelect));
+	onMount(() => {
+		const form = hiddenSelect.form;
+		let resetFrame = 0;
+		const handleReset = () => {
+			cancelAnimationFrame(resetFrame);
+			resetFrame = requestAnimationFrame(syncHiddenSelect);
+		};
+		form?.addEventListener("reset", handleReset);
+		onCleanup(() => {
+			form?.removeEventListener("reset", handleReset);
+			cancelAnimationFrame(resetFrame);
+		});
+	});
+	return createComponent(SelectContext.Provider, {
+		value: {
+			label: () => local.label,
+			placeholder: () => local.placeholder,
+			options: () => local.options,
+			api
+		},
+		get children() {
+			var _el$ = _tmpl$$1(), _el$2 = _el$.firstChild;
+			spread(_el$, mergeProps(() => mergeWidgetProps(api().getRootProps(), rest), { get ["class"]() {
+				return cn("sb-select-root", local.class);
+			} }), false, true);
+			use((element) => {
+				hiddenSelect = element;
+			}, _el$2);
+			spread(_el$2, mergeProps(() => api().getHiddenSelectProps()), false, true);
+			insert(_el$2, createComponent(For, {
+				get each() {
+					return local.options;
+				},
+				children: (option) => (() => {
+					var _el$3 = _tmpl$2$1();
+					insert(_el$3, () => option.label);
+					effect(() => _el$3.value = option.value);
+					return _el$3;
+				})()
+			}));
+			insert(_el$, () => local.children, null);
+			return _el$;
+		}
+	});
+}
+function SelectLabel(props) {
+	const { api, label } = useSelect();
+	const [local, rest] = splitProps(props, ["class", "children"]);
+	return (() => {
+		var _el$4 = _tmpl$3$1();
+		spread(_el$4, mergeProps(() => mergeWidgetProps(api().getLabelProps(), rest), { get ["class"]() {
+			return cn("sb-select-label", local.class);
+		} }), false, true);
+		insert(_el$4, () => local.children ?? label());
+		return _el$4;
+	})();
+}
+function SelectControl(props) {
+	const { api } = useSelect();
+	const [local, rest] = splitProps(props, ["class", "children"]);
+	return (() => {
+		var _el$5 = _tmpl$4$1();
+		spread(_el$5, mergeProps(() => mergeWidgetProps(api().getControlProps(), rest), { get ["class"]() {
+			return cn("sb-select-control", local.class);
+		} }), false, true);
+		insert(_el$5, () => local.children);
+		return _el$5;
+	})();
+}
+function SelectTrigger(props) {
+	const { api, label } = useSelect();
+	const [local, rest] = splitProps(props, ["class", "children"]);
+	return (() => {
+		var _el$6 = _tmpl$5$1();
+		spread(_el$6, mergeProps({ get ["aria-label"]() {
+			return label();
+		} }, () => mergeWidgetProps(api().getTriggerProps(), rest), { get ["class"]() {
+			return cn("sb-select-trigger", local.class);
+		} }), false, true);
+		insert(_el$6, () => local.children);
+		return _el$6;
+	})();
+}
+function SelectValueText(props) {
+	const { api, placeholder } = useSelect();
+	const [local, rest] = splitProps(props, ["class", "children"]);
+	return (() => {
+		var _el$7 = _tmpl$6$1();
+		spread(_el$7, mergeProps(() => mergeWidgetProps(api().getValueTextProps(), rest), { get ["class"]() {
+			return cn("sb-select-value-text", local.class);
+		} }), false, true);
+		insert(_el$7, () => local.children ?? (api().valueAsString || placeholder()));
+		return _el$7;
+	})();
+}
+function SelectIndicator(props) {
+	const { api } = useSelect();
+	const [local, rest] = splitProps(props, ["class", "children"]);
+	return (() => {
+		var _el$8 = _tmpl$6$1();
+		spread(_el$8, mergeProps(() => mergeWidgetProps(api().getIndicatorProps(), rest), {
+			"aria-hidden": "true",
+			get ["class"]() {
+				return cn("sb-select-indicator", local.class);
+			}
+		}), false, true);
+		insert(_el$8, () => local.children);
+		return _el$8;
+	})();
+}
+function SelectPortal(props) {
+	return createComponent(Portal, {
+		get mount() {
+			return props.mount;
+		},
+		get children() {
+			return props.children;
+		}
+	});
+}
+function SelectPositioner(props) {
+	const { api } = useSelect();
+	const [local, rest] = splitProps(props, ["class", "children"]);
+	return (() => {
+		var _el$9 = _tmpl$4$1();
+		spread(_el$9, mergeProps(() => mergeWidgetProps(api().getPositionerProps(), rest), { get ["class"]() {
+			return cn("sb-select-positioner", local.class);
+		} }), false, true);
+		insert(_el$9, () => local.children);
+		return _el$9;
+	})();
+}
+function SelectContent(props) {
+	const { api } = useSelect();
+	const [local, rest] = splitProps(props, ["class", "children"]);
+	return (() => {
+		var _el$0 = _tmpl$4$1();
+		spread(_el$0, mergeProps({ get hidden() {
+			return !api().open;
+		} }, rest, { get ["class"]() {
+			return cn("sb-select-content", local.class);
+		} }), false, true);
+		insert(_el$0, () => local.children);
+		return _el$0;
+	})();
+}
+function SelectList(props) {
+	const { api, options, label } = useSelect();
+	const [local, rest] = splitProps(props, ["class", "children"]);
+	return (() => {
+		var _el$1 = _tmpl$7$1();
+		spread(_el$1, mergeProps({ get ["aria-label"]() {
+			return label();
+		} }, () => mergeWidgetProps(api().getContentProps(), rest), { get ["class"]() {
+			return cn("sb-select-list", local.class);
+		} }), false, true);
+		insert(_el$1, createComponent(For, {
+			get each() {
+				return options();
+			},
+			children: (option) => local.children(option)
+		}));
+		return _el$1;
+	})();
+}
+function SelectEmpty(props) {
+	const { api, options } = useSelect();
+	const [local, rest] = splitProps(props, ["class", "children"]);
+	return createComponent(Show, {
+		get when() {
+			return memo(() => !!api().open)() && options().length === 0;
+		},
+		get children() {
+			var _el$10 = _tmpl$4$1();
+			spread(_el$10, mergeProps(rest, {
+				"role": "status",
+				get ["class"]() {
+					return cn("sb-select-empty", local.class);
+				}
+			}), false, true);
+			insert(_el$10, () => local.children);
+			return _el$10;
+		}
+	});
+}
+function SelectItem(props) {
+	const { api } = useSelect();
+	const [local, rest] = splitProps(props, ["class", "option"]);
+	return (() => {
+		var _el$11 = _tmpl$8$1();
+		spread(_el$11, mergeProps(() => mergeWidgetProps(api().getItemProps({ item: local.option }), rest), { get ["class"]() {
+			return cn("sb-select-item", local.class);
+		} }), false, true);
+		insert(_el$11, () => local.option.label);
+		return _el$11;
+	})();
+}
+const Select = Object.assign(SelectRoot, {
+	Root: SelectRoot,
+	Label: SelectLabel,
+	Control: SelectControl,
+	Trigger: SelectTrigger,
+	ValueText: SelectValueText,
+	Indicator: SelectIndicator,
+	Portal: SelectPortal,
+	Positioner: SelectPositioner,
+	Content: SelectContent,
+	List: SelectList,
+	Empty: SelectEmpty,
+	Item: SelectItem
+});
+//#endregion
+//#region src/components/Table.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<table>`);
+var _tmpl$2 = /*#__PURE__*/ template(`<div>`);
+var _tmpl$3 = /*#__PURE__*/ template(`<caption>`);
+var _tmpl$4 = /*#__PURE__*/ template(`<thead>`);
+var _tmpl$5 = /*#__PURE__*/ template(`<tbody>`);
+var _tmpl$6 = /*#__PURE__*/ template(`<tfoot>`);
+var _tmpl$7 = /*#__PURE__*/ template(`<tr>`);
+var _tmpl$8 = /*#__PURE__*/ template(`<th>`);
+var _tmpl$9 = /*#__PURE__*/ template(`<td>`);
+function TableRoot(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return (() => {
+		var _el$ = _tmpl$();
+		spread(_el$, mergeProps(rest, { get ["class"]() {
+			return cn("sb-table", local.class);
+		} }), false, false);
+		return _el$;
+	})();
+}
+function TableWrap(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return (() => {
+		var _el$2 = _tmpl$2();
+		spread(_el$2, mergeProps(rest, { get ["class"]() {
+			return cn("sb-table-wrap", local.class);
+		} }), false, false);
+		return _el$2;
+	})();
+}
+function TableCaption(props) {
+	return (() => {
+		var _el$3 = _tmpl$3();
+		spread(_el$3, props, false, false);
+		return _el$3;
+	})();
+}
+function TableHeader(props) {
+	return (() => {
+		var _el$4 = _tmpl$4();
+		spread(_el$4, props, false, false);
+		return _el$4;
+	})();
+}
+function TableBody(props) {
+	return (() => {
+		var _el$5 = _tmpl$5();
+		spread(_el$5, props, false, false);
+		return _el$5;
+	})();
+}
+function TableFooter(props) {
+	return (() => {
+		var _el$6 = _tmpl$6();
+		spread(_el$6, props, false, false);
+		return _el$6;
+	})();
+}
+function TableRow(props) {
+	return (() => {
+		var _el$7 = _tmpl$7();
+		spread(_el$7, props, false, false);
+		return _el$7;
+	})();
+}
+function TableColumnHeader(props) {
+	const [local, rest] = splitProps(props, ["scope"]);
+	return (() => {
+		var _el$8 = _tmpl$8();
+		spread(_el$8, mergeProps(rest, { get scope() {
+			return local.scope ?? "col";
+		} }), false, false);
+		return _el$8;
+	})();
+}
+function TableRowHeader(props) {
+	const [local, rest] = splitProps(props, ["scope"]);
+	return (() => {
+		var _el$9 = _tmpl$8();
+		spread(_el$9, mergeProps(rest, { get scope() {
+			return local.scope ?? "row";
+		} }), false, false);
+		return _el$9;
+	})();
+}
+function TableCell(props) {
+	const [local, rest] = splitProps(props, ["variant"]);
+	return (() => {
+		var _el$0 = _tmpl$9();
+		spread(_el$0, mergeProps(rest, { get ["data-variant"]() {
+			return local.variant;
+		} }), false, false);
+		return _el$0;
+	})();
+}
+const Table = Object.assign(TableRoot, {
+	Root: TableRoot,
+	Wrap: TableWrap,
+	Caption: TableCaption,
+	Header: TableHeader,
+	Body: TableBody,
+	Footer: TableFooter,
+	Row: TableRow,
+	ColumnHeader: TableColumnHeader,
+	RowHeader: TableRowHeader,
+	Cell: TableCell
+});
+//#endregion
+export { AlertDialog, Badge, Button, Checkbox, Combobox, Input, Radio, Select, Switch, Table, TextArea };