@edo-w/flatline-solid 0.2.1 → 0.3.0

package/dist/checkbox/index.d.ts

@@ -0,0 +1,55 @@
+import * as _$solid_js0 from "solid-js";
+import { Accessor, JSX } from "solid-js";
+
+//#region src/components/checkbox/types.d.ts
+type CheckboxGroupBaseProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, 'onChange'>;
+interface CheckboxGroupProps extends CheckboxGroupBaseProps {
+  value?: string[];
+  defaultValue?: string[];
+  name?: string;
+  disabled?: boolean;
+  onChange?: (value: string[]) => void;
+}
+type CheckboxBaseProps = Omit<JSX.InputHTMLAttributes<HTMLInputElement>, 'type' | 'onChange' | 'size'>;
+interface CheckboxProps extends CheckboxBaseProps {
+  checked?: boolean;
+  defaultChecked?: boolean;
+  value?: string;
+  onChange?: (checked: boolean) => void;
+}
+//#endregion
+//#region src/components/checkbox/checkbox-group.d.ts
+declare function CheckboxGroup(props: CheckboxGroupProps): _$solid_js0.JSX.Element;
+//#endregion
+//#region src/components/checkbox/checkbox.d.ts
+interface CheckboxComponent {
+  (props: CheckboxProps): JSX.Element;
+  Group: typeof CheckboxGroup;
+}
+declare const Checkbox: CheckboxComponent;
+//#endregion
+//#region src/components/checkbox/checkbox-root.d.ts
+declare function CheckboxRoot(props: CheckboxProps): JSX.Element;
+//#endregion
+//#region src/components/checkbox/class.d.ts
+declare const checkboxClass: {
+  readonly group: "fl-checkbox-group";
+  readonly root: "fl-checkbox";
+  readonly input: "fl-checkbox_input";
+  readonly control: "fl-checkbox_control";
+  readonly indicator: "fl-checkbox_indicator";
+  readonly label: "fl-checkbox_label";
+};
+//#endregion
+//#region src/components/checkbox/context.d.ts
+interface CheckboxGroupContextValue {
+  name: Accessor<string>;
+  values: Accessor<string[]>;
+  toggleValue: (value: string, checked: boolean) => void;
+  disabled: Accessor<boolean>;
+}
+declare const CheckboxGroupContext: _$solid_js0.Context<CheckboxGroupContextValue | undefined>;
+declare function useCheckboxGroupContext(): CheckboxGroupContextValue | undefined;
+//#endregion
+export { Checkbox, type CheckboxBaseProps, CheckboxComponent, CheckboxGroup, type CheckboxGroupBaseProps, CheckboxGroupContext, CheckboxGroupContextValue, type CheckboxGroupProps, type CheckboxProps, CheckboxRoot, checkboxClass, useCheckboxGroupContext };
+//# sourceMappingURL=index.d.ts.map

package/dist/checkbox/index.js

@@ -0,0 +1,156 @@
+import './index.css';
+import { t as clsx } from "../lite-CiFvU804.js";
+import { n as CheckIcon } from "../icons-CH4ghH8L.js";
+import { className, createComponent, effect, insert, memo, mergeProps, setAttribute, spread, template } from "solid-js/web";
+import { createContext, createSignal, createUniqueId, mergeProps as mergeProps$1, splitProps, useContext } from "solid-js";
+//#region src/components/checkbox/class.ts
+const checkboxClass = {
+	group: "fl-checkbox-group",
+	root: "fl-checkbox",
+	input: "fl-checkbox_input",
+	control: "fl-checkbox_control",
+	indicator: "fl-checkbox_indicator",
+	label: "fl-checkbox_label"
+};
+//#endregion
+//#region src/components/checkbox/context.ts
+const CheckboxGroupContext = createContext();
+function useCheckboxGroupContext() {
+	return useContext(CheckboxGroupContext);
+}
+//#endregion
+//#region src/components/checkbox/checkbox-group.tsx
+var _tmpl$$1 = /* @__PURE__ */ template(`<div role=group>`);
+function CheckboxGroup(props) {
+	const generatedName = createUniqueId();
+	const [local, rest] = splitProps(props, [
+		"class",
+		"children",
+		"value",
+		"defaultValue",
+		"name",
+		"disabled",
+		"onChange"
+	]);
+	const [internalValue, setInternalValue] = createSignal(local.defaultValue ?? []);
+	const values = () => local.value ?? internalValue();
+	const name = () => local.name ?? generatedName;
+	const disabled = () => Boolean(local.disabled);
+	const toggleValue = (nextValue, checked) => {
+		const current = values();
+		let next = current;
+		if (checked) {
+			if (!current.includes(nextValue)) next = [...current, nextValue];
+		} else next = current.filter((value) => value !== nextValue);
+		if (local.value === void 0) setInternalValue(next);
+		local.onChange?.(next);
+	};
+	return createComponent(CheckboxGroupContext.Provider, {
+		value: {
+			name,
+			values,
+			toggleValue,
+			disabled
+		},
+		get children() {
+			var _el$ = _tmpl$$1();
+			spread(_el$, mergeProps({ get ["class"]() {
+				return clsx(checkboxClass.group, local.class);
+			} }, rest), false, true);
+			insert(_el$, () => local.children);
+			return _el$;
+		}
+	});
+}
+//#endregion
+//#region src/components/checkbox/checkbox-root.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<label><input type=checkbox><span><span>`), _tmpl$2 = /* @__PURE__ */ template(`<span>`);
+function CheckboxRoot(props) {
+	const context = useCheckboxGroupContext();
+	const [local, rest] = splitProps(mergeProps$1({
+		type: "checkbox",
+		value: "on"
+	}, props), [
+		"checked",
+		"children",
+		"class",
+		"defaultChecked",
+		"disabled",
+		"name",
+		"onChange",
+		"type",
+		"value"
+	]);
+	const [internalChecked, setInternalChecked] = createSignal(Boolean(local.defaultChecked));
+	const rootClass = () => clsx(checkboxClass.root, local.class);
+	const checked = () => {
+		if (context) return context.values().includes(local.value);
+		return local.checked ?? internalChecked();
+	};
+	const disabled = () => Boolean(context?.disabled() || local.disabled);
+	const name = () => context?.name() ?? local.name;
+	const handleChange = (event) => {
+		const nextChecked = event.currentTarget.checked;
+		local.onChange?.(nextChecked);
+		if (context) {
+			context.toggleValue(local.value, nextChecked);
+			return;
+		}
+		if (local.checked === void 0) setInternalChecked(nextChecked);
+	};
+	return (() => {
+		var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.firstChild;
+		_el$2.addEventListener("change", handleChange);
+		spread(_el$2, mergeProps({
+			get ["class"]() {
+				return checkboxClass.input;
+			},
+			get value() {
+				return local.value;
+			},
+			get name() {
+				return name();
+			},
+			get checked() {
+				return checked();
+			},
+			get disabled() {
+				return disabled();
+			}
+		}, rest), false, false);
+		insert(_el$4, createComponent(CheckIcon, {
+			w: "0.875rem",
+			h: "0.875rem"
+		}));
+		insert(_el$, (() => {
+			var _c$ = memo(() => !!local.children);
+			return () => _c$() ? (() => {
+				var _el$5 = _tmpl$2();
+				insert(_el$5, () => local.children);
+				effect(() => className(_el$5, checkboxClass.label));
+				return _el$5;
+			})() : null;
+		})(), null);
+		effect((_p$) => {
+			var _v$ = rootClass(), _v$2 = disabled() ? "" : void 0, _v$3 = checkboxClass.control, _v$4 = checkboxClass.indicator;
+			_v$ !== _p$.e && className(_el$, _p$.e = _v$);
+			_v$2 !== _p$.t && setAttribute(_el$, "data-disabled", _p$.t = _v$2);
+			_v$3 !== _p$.a && className(_el$3, _p$.a = _v$3);
+			_v$4 !== _p$.o && className(_el$4, _p$.o = _v$4);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0,
+			o: void 0
+		});
+		return _el$;
+	})();
+}
+//#endregion
+//#region src/components/checkbox/checkbox.tsx
+const Checkbox = Object.assign(CheckboxRoot, { Group: CheckboxGroup });
+//#endregion
+export { Checkbox, CheckboxGroup, CheckboxGroupContext, CheckboxRoot, checkboxClass, useCheckboxGroupContext };
+
+//# sourceMappingURL=index.js.map

package/dist/checkbox/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["clsx","createSignal","createUniqueId","splitProps","checkboxClass","CheckboxGroupContext","CheckboxGroupProps","CheckboxGroup","props","generatedName","local","rest","internalValue","setInternalValue","defaultValue","values","value","name","disabled","Boolean","toggleValue","nextValue","checked","current","next","includes","filter","undefined","onChange","_$createComponent","Provider","children","_el$","_tmpl$","_$spread","_$mergeProps","class","group","_$insert","clsx","createSignal","JSX","mergeProps","splitProps","CheckIcon","checkboxClass","useCheckboxGroupContext","CheckboxProps","CheckboxRoot","props","context","merged","type","value","const","local","rest","internalChecked","setInternalChecked","Boolean","defaultChecked","rootClass","root","class","checked","values","includes","disabled","name","handleChange","EventHandlerUnion","HTMLInputElement","Event","event","nextChecked","currentTarget","onChange","toggleValue","undefined","_el$","_tmpl$","_el$2","firstChild","_el$3","nextSibling","_el$4","addEventListener","_$spread","_$mergeProps","input","_$insert","_$createComponent","w","h","_c$","_$memo","children","_el$5","_tmpl$2","_$effect","_$className","label","_p$","_v$","_v$2","_v$3","control","_v$4","indicator","e","t","_$setAttribute","a","o","JSX","CheckboxGroup","CheckboxRoot","CheckboxProps","CheckboxBaseProps","CheckboxGroupBaseProps","CheckboxGroupProps","CheckboxComponent","props","Element","Group","Checkbox","Object","assign"],"sources":["../../src/components/checkbox/class.ts","../../src/components/checkbox/context.ts","../../src/components/checkbox/checkbox-group.tsx","../../src/components/checkbox/checkbox-root.tsx","../../src/components/checkbox/checkbox.tsx"],"sourcesContent":["export const checkboxClass = {\n\tgroup: 'fl-checkbox-group',\n\troot: 'fl-checkbox',\n\tinput: 'fl-checkbox_input',\n\tcontrol: 'fl-checkbox_control',\n\tindicator: 'fl-checkbox_indicator',\n\tlabel: 'fl-checkbox_label',\n} as const;\n","import { type Accessor, createContext, useContext } from 'solid-js';\n\nexport interface CheckboxGroupContextValue {\n\tname: Accessor<string>;\n\tvalues: Accessor<string[]>;\n\ttoggleValue: (value: string, checked: boolean) => void;\n\tdisabled: Accessor<boolean>;\n}\n\nexport const CheckboxGroupContext = createContext<CheckboxGroupContextValue>();\n\nexport function useCheckboxGroupContext() {\n\treturn useContext(CheckboxGroupContext);\n}\n","import clsx from 'clsx/lite';\nimport { createSignal, createUniqueId, splitProps } from 'solid-js';\nimport { checkboxClass } from './class';\nimport { CheckboxGroupContext } from './context';\nimport type { CheckboxGroupProps } from './types';\nimport './checkbox-group.css';\n\nexport function CheckboxGroup(props: CheckboxGroupProps) {\n\tconst generatedName = createUniqueId();\n\tconst [local, rest] = splitProps(props, [\n\t\t'class',\n\t\t'children',\n\t\t'value',\n\t\t'defaultValue',\n\t\t'name',\n\t\t'disabled',\n\t\t'onChange',\n\t]);\n\tconst [internalValue, setInternalValue] = createSignal(local.defaultValue ?? []);\n\n\tconst values = () => local.value ?? internalValue();\n\tconst name = () => local.name ?? generatedName;\n\tconst disabled = () => Boolean(local.disabled);\n\tconst toggleValue = (nextValue: string, checked: boolean) => {\n\t\tconst current = values();\n\t\tlet next = current;\n\n\t\tif (checked) {\n\t\t\tif (!current.includes(nextValue)) {\n\t\t\t\tnext = [...current, nextValue];\n\t\t\t}\n\t\t} else {\n\t\t\tnext = current.filter((value) => value !== nextValue);\n\t\t}\n\n\t\tif (local.value === undefined) {\n\t\t\tsetInternalValue(next);\n\t\t}\n\n\t\tlocal.onChange?.(next);\n\t};\n\n\treturn (\n\t\t<CheckboxGroupContext.Provider value={{ name, values, toggleValue, disabled }}>\n\t\t\t<div\n\t\t\t\tclass={clsx(checkboxClass.group, local.class)}\n\t\t\t\trole=\"group\"\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t{local.children}\n\t\t\t</div>\n\t\t</CheckboxGroupContext.Provider>\n\t);\n}\n","import clsx from 'clsx/lite';\nimport { createSignal, type JSX, mergeProps, splitProps } from 'solid-js';\nimport { CheckIcon } from '#src/icons';\nimport { checkboxClass } from './class';\nimport { useCheckboxGroupContext } from './context';\nimport type { CheckboxProps } from './types';\nimport './checkbox-root.css';\n\nexport function CheckboxRoot(props: CheckboxProps) {\n\tconst context = useCheckboxGroupContext();\n\tconst merged = mergeProps(\n\t\t{\n\t\t\ttype: 'checkbox',\n\t\t\tvalue: 'on',\n\t\t} as const,\n\t\tprops,\n\t);\n\tconst [local, rest] = splitProps(merged, [\n\t\t'checked',\n\t\t'children',\n\t\t'class',\n\t\t'defaultChecked',\n\t\t'disabled',\n\t\t'name',\n\t\t'onChange',\n\t\t'type',\n\t\t'value',\n\t]);\n\tconst [internalChecked, setInternalChecked] = createSignal(Boolean(local.defaultChecked));\n\tconst rootClass = () => clsx(checkboxClass.root, local.class);\n\tconst checked = () => {\n\t\tif (context) {\n\t\t\treturn context.values().includes(local.value);\n\t\t}\n\n\t\treturn local.checked ?? internalChecked();\n\t};\n\tconst disabled = () => Boolean(context?.disabled() || local.disabled);\n\tconst name = () => context?.name() ?? local.name;\n\n\tconst handleChange: JSX.EventHandlerUnion<HTMLInputElement, Event> = (event) => {\n\t\tconst nextChecked = event.currentTarget.checked;\n\t\tlocal.onChange?.(nextChecked);\n\n\t\tif (context) {\n\t\t\tcontext.toggleValue(local.value, nextChecked);\n\t\t\treturn;\n\t\t}\n\n\t\tif (local.checked === undefined) {\n\t\t\tsetInternalChecked(nextChecked);\n\t\t}\n\t};\n\n\treturn (\n\t\t<label\n\t\t\tclass={rootClass()}\n\t\t\tdata-disabled={disabled() ? '' : undefined}\n\t\t>\n\t\t\t<input\n\t\t\t\tclass={checkboxClass.input}\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\tvalue={local.value}\n\t\t\t\tname={name()}\n\t\t\t\tchecked={checked()}\n\t\t\t\tdisabled={disabled()}\n\t\t\t\tonChange={handleChange}\n\t\t\t\t{...rest}\n\t\t\t/>\n\t\t\t<span class={checkboxClass.control}>\n\t\t\t\t<span class={checkboxClass.indicator}>\n\t\t\t\t\t<CheckIcon\n\t\t\t\t\t\tw=\"0.875rem\"\n\t\t\t\t\t\th=\"0.875rem\"\n\t\t\t\t\t/>\n\t\t\t\t</span>\n\t\t\t</span>\n\t\t\t{local.children ? <span class={checkboxClass.label}>{local.children}</span> : null}\n\t\t</label>\n\t);\n}\n","import type { JSX } from 'solid-js';\nimport { CheckboxGroup } from './checkbox-group';\nimport { CheckboxRoot } from './checkbox-root';\nimport type { CheckboxProps } from './types';\n\nexport type { CheckboxBaseProps, CheckboxGroupBaseProps, CheckboxGroupProps, CheckboxProps } from './types';\n\nexport interface CheckboxComponent {\n\t(props: CheckboxProps): JSX.Element;\n\tGroup: typeof CheckboxGroup;\n}\n\nexport const Checkbox: CheckboxComponent = Object.assign(CheckboxRoot, {\n\tGroup: CheckboxGroup,\n});\n"],"mappings":"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"}

package/dist/combobox/index.css

@@ -0,0 +1,184 @@
+@layer components {
+  .fl-combobox {
+    gap: var(--fl-size-1);
+    flex-direction: column;
+    width: 100%;
+    display: inline-flex;
+    position: relative;
+  }
+}
+@layer components {
+  .fl-combobox_control {
+    background: var(--fl-input-bg-color, var(--fl-body-bg-color));
+    border: var(--fl-input-border-size, var(--fl-border-size, 1px)) solid
+			var(--fl-input-border-color, var(--fl-border-color));
+    border-radius: var(--fl-input-border-radius, var(--fl-border-radius));
+    width: 100%;
+    min-width: 0;
+    box-shadow: var(--fl-input-shadow);
+    align-items: stretch;
+    display: inline-flex;
+  }
+
+  .fl-combobox_control:focus-within {
+    border-color: var(--fl-input-border-focus-color, var(--fl-focus-ring-color));
+    outline: var(--fl-focus-ring-size) solid var(--fl-focus-ring-color);
+    outline-offset: 0;
+  }
+
+  .fl-combobox_control[data-disabled] {
+    cursor: var(--fl-disabled-cursor);
+    opacity: var(--fl-disabled-opacity);
+  }
+}
+@layer components {
+  .fl-combobox_input {
+    appearance: none;
+    min-width: 0;
+    min-height: calc(var(--fl-input-pad-y, var(--fl-size-1-5)) * 2 + 1em);
+    padding-inline: var(--fl-input-pad-x, var(--fl-size-2));
+    padding-block: var(--fl-input-pad-y, var(--fl-size-1-5));
+    color: var(--fl-input-text-color, var(--fl-body-text-color));
+    font: inherit;
+    background: none;
+    border: 0;
+    outline: none;
+    flex: auto;
+  }
+
+  .fl-combobox_input::placeholder {
+    color: var(--fl-body-muted-text-color);
+  }
+
+  .fl-combobox_input:disabled {
+    cursor: var(--fl-disabled-cursor);
+  }
+}
+@layer components {
+  .fl-combobox_trigger {
+    appearance: none;
+    padding-inline: var(--fl-size-2);
+    padding-block: var(--fl-input-pad-y, var(--fl-size-1-5));
+    color: var(--fl-input-text-color, var(--fl-body-text-color));
+    cursor: pointer;
+    background: none;
+    border: 0;
+    outline: none;
+    flex: none;
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+  }
+
+  .fl-combobox_control[data-disabled] .fl-combobox_trigger {
+    cursor: var(--fl-disabled-cursor);
+  }
+}
+@layer components {
+  .fl-combobox_icon {
+    width: var(--fl-size-4);
+    height: var(--fl-size-4);
+    flex: none;
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+  }
+}
+@layer components {
+  .fl-combobox_content {
+    top: calc(100% + var(--fl-size-1));
+    z-index: 10;
+    background: var(--fl-body-bg-color);
+    border: var(--fl-border-size, 1px) solid var(--fl-border-color);
+    border-radius: var(--fl-border-radius);
+    max-height: 19rem;
+    box-shadow: var(--fl-shadow-md);
+    position: absolute;
+    left: 0;
+    right: 0;
+    overflow: hidden;
+  }
+}
+@layer components {
+  .fl-combobox_listbox {
+    --fl-combobox-listbox-pad: var(--fl-size-2);
+    max-height: inherit;
+    scroll-padding-block: var(--fl-combobox-listbox-pad);
+    padding: var(--fl-combobox-listbox-pad);
+    margin: 0;
+    list-style: none;
+    overflow-y: auto;
+  }
+
+  .fl-combobox_listbox:focus {
+    outline: none;
+  }
+}
+@layer components {
+  .fl-combobox_item {
+    min-height: var(--fl-size-8);
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--fl-size-2);
+    padding-inline: var(--fl-size-2);
+    padding-block: var(--fl-size-1-5);
+    border-radius: var(--fl-radius-sm);
+    color: var(--fl-body-text-color);
+    font: var(--fl-font-body);
+    cursor: pointer;
+    user-select: none;
+    outline: none;
+    display: flex;
+  }
+
+  .fl-combobox_item[data-disabled] {
+    cursor: var(--fl-disabled-cursor);
+    opacity: var(--fl-disabled-opacity);
+  }
+
+  .fl-combobox_item[data-selected] {
+    background: color-mix(in srgb, var(--fl-body-bg-color), var(--fl-primary-color) 15%);
+  }
+
+  .fl-combobox_item[data-highlighted] {
+    background: var(--fl-primary-color);
+    color: var(--fl-primary-text-color);
+  }
+
+  .fl-combobox_item .fl-combobox_item-label {
+    flex: auto;
+    min-width: 0;
+  }
+}
+@layer components {
+  .fl-combobox_group {
+    gap: var(--fl-size-1);
+    padding-bottom: var(--fl-size-1);
+    color: var(--fl-body-muted-text-color);
+    font-weight: var(--fl-font-weight-semibold);
+    font-size: var(--fl-text-size-xs);
+    list-style: none;
+    display: grid;
+  }
+
+  .fl-combobox_group hr {
+    margin-block: var(--fl-size-1-5);
+    margin-inline: calc(var(--fl-size-2) * -1);
+    border: 0;
+    border-top: var(--fl-border-size, 1px) solid var(--fl-border-color);
+  }
+
+  .fl-combobox_group:first-child hr {
+    display: none;
+  }
+}
+@layer components {
+  .fl-combobox_item-indicator {
+    width: var(--fl-size-4);
+    height: var(--fl-size-4);
+    flex: none;
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+  }
+}

package/dist/combobox/index.d.ts

@@ -0,0 +1,145 @@
+import * as _$solid_js0 from "solid-js";
+import { Component, JSX } from "solid-js";
+
+//#region src/components/combobox/class.d.ts
+declare const comboboxClass: {
+  readonly root: "fl-combobox";
+  readonly control: "fl-combobox_control";
+  readonly input: "fl-combobox_input";
+  readonly trigger: "fl-combobox_trigger";
+  readonly icon: "fl-combobox_icon";
+  readonly content: "fl-combobox_content";
+  readonly listbox: "fl-combobox_listbox";
+  readonly item: "fl-combobox_item";
+  readonly itemLabel: "fl-combobox_item-label";
+  readonly itemIndicator: "fl-combobox_item-indicator";
+  readonly group: "fl-combobox_group";
+};
+//#endregion
+//#region src/components/combobox/types.d.ts
+type ComboboxAccessor<T, Result> = keyof Exclude<T, null> | ((value: Exclude<T, null>) => Result);
+type ComboboxGroupAccessor<TOptionGroup, TOption> = keyof Exclude<TOptionGroup, null> | ((group: Exclude<TOptionGroup, null>) => TOption[]);
+interface ComboboxItemData<TOption> {
+  key: string;
+  value: string;
+  label: string;
+  textValue: string;
+  disabled: boolean;
+  rawValue: TOption;
+}
+interface ComboboxGroupData<TOptionGroup, TOption> {
+  key: string;
+  textValue: string;
+  rawValue?: TOptionGroup;
+  items: ComboboxItemData<TOption>[];
+}
+type ComboboxRenderItemProps<TOption> = {
+  item: ComboboxItemData<TOption>;
+};
+type ComboboxRenderGroupProps<TOptionGroup, TOption = any> = {
+  group: ComboboxGroupData<TOptionGroup, TOption>;
+};
+interface ComboboxRootProps<TOption, TOptionGroup = never> extends Omit<JSX.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+  options: Array<TOption | TOptionGroup>;
+  children?: JSX.Element;
+  optionValue?: ComboboxAccessor<TOption, string | number>;
+  optionTextValue?: ComboboxAccessor<TOption, string>;
+  optionLabel?: ComboboxAccessor<TOption, string>;
+  optionDisabled?: ComboboxAccessor<TOption, boolean>;
+  optionGroupChildren?: ComboboxGroupAccessor<TOptionGroup, TOption>;
+  itemComponent?: Component<ComboboxRenderItemProps<TOption>>;
+  groupComponent?: Component<ComboboxRenderGroupProps<TOptionGroup, TOption>>;
+  placeholder?: string;
+  value?: TOption | null;
+  defaultValue?: TOption;
+  inputValue?: string;
+  defaultInputValue?: string;
+  onChange?: (value: TOption | null) => void;
+  onInputChange?: (value: string) => void;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (value: boolean) => void;
+  disabled?: boolean;
+  readOnly?: boolean;
+  required?: boolean;
+  name?: string;
+  closeOnSelection?: boolean;
+}
+type ComboboxControlProps = JSX.HTMLAttributes<HTMLDivElement>;
+type ComboboxInputProps = JSX.InputHTMLAttributes<HTMLInputElement>;
+type ComboboxTriggerProps = JSX.ButtonHTMLAttributes<HTMLButtonElement>;
+type ComboboxIconProps = JSX.HTMLAttributes<HTMLSpanElement>;
+type ComboboxPortalProps = {
+  children?: JSX.Element;
+};
+type ComboboxContentProps = JSX.HTMLAttributes<HTMLDivElement>;
+type ComboboxListboxProps = JSX.HTMLAttributes<HTMLUListElement>;
+interface ComboboxItemProps<TOption = any> extends JSX.HTMLAttributes<HTMLLIElement> {
+  item: ComboboxItemData<TOption>;
+}
+type ComboboxItemLabelProps = JSX.HTMLAttributes<HTMLDivElement>;
+type ComboboxItemIndicatorProps = JSX.HTMLAttributes<HTMLDivElement>;
+interface ComboboxGroupProps<TOptionGroup = any, TOption = any> extends JSX.HTMLAttributes<HTMLLIElement> {
+  group?: ComboboxGroupData<TOptionGroup, TOption>;
+}
+interface ComboboxHiddenSelectProps extends JSX.InputHTMLAttributes<HTMLInputElement> {}
+//#endregion
+//#region src/components/combobox/combobox-content.d.ts
+declare function ComboboxContent(props: ComboboxContentProps): _$solid_js0.JSX.Element;
+//#endregion
+//#region src/components/combobox/combobox-control.d.ts
+declare function ComboboxControl(props: ComboboxControlProps): JSX.Element;
+//#endregion
+//#region src/components/combobox/combobox-group.d.ts
+declare function ComboboxGroup<TOptionGroup = any, TOption = any>(props: ComboboxGroupProps<TOptionGroup, TOption>): _$solid_js0.JSX.Element;
+//#endregion
+//#region src/components/combobox/combobox-hidden-select.d.ts
+declare function ComboboxHiddenSelect(props: ComboboxHiddenSelectProps): _$solid_js0.JSX.Element;
+//#endregion
+//#region src/components/combobox/combobox-icon.d.ts
+declare function ComboboxIcon(props: ComboboxIconProps): _$solid_js0.JSX.Element;
+//#endregion
+//#region src/components/combobox/combobox-input.d.ts
+declare function ComboboxInput(props: ComboboxInputProps): JSX.Element;
+//#endregion
+//#region src/components/combobox/combobox-item.d.ts
+declare function ComboboxItem<TOption = any>(props: ComboboxItemProps<TOption>): JSX.Element;
+//#endregion
+//#region src/components/combobox/combobox-item-indicator.d.ts
+declare function ComboboxItemIndicator(props: ComboboxItemIndicatorProps): _$solid_js0.JSX.Element;
+//#endregion
+//#region src/components/combobox/combobox-item-label.d.ts
+declare function ComboboxItemLabel(props: ComboboxItemLabelProps): _$solid_js0.JSX.Element;
+//#endregion
+//#region src/components/combobox/combobox-listbox.d.ts
+declare function ComboboxListbox<TOption = any, TOptionGroup = never>(props: ComboboxListboxProps): _$solid_js0.JSX.Element;
+//#endregion
+//#region src/components/combobox/combobox-portal.d.ts
+declare function ComboboxPortal(props: ComboboxPortalProps): _$solid_js0.JSX.Element;
+//#endregion
+//#region src/components/combobox/combobox-root.d.ts
+declare function ComboboxRoot<TOption, TOptionGroup = never>(props: ComboboxRootProps<TOption, TOptionGroup>): JSX.Element;
+//#endregion
+//#region src/components/combobox/combobox-trigger.d.ts
+declare function ComboboxTrigger(props: ComboboxTriggerProps): JSX.Element;
+//#endregion
+//#region src/components/combobox/combobox.d.ts
+interface ComboboxComponent {
+  <TOption, TOptionGroup = never>(props: ComboboxRootProps<TOption, TOptionGroup>): JSX.Element;
+  Control: typeof ComboboxControl;
+  Input: typeof ComboboxInput;
+  Trigger: typeof ComboboxTrigger;
+  Icon: typeof ComboboxIcon;
+  Portal: typeof ComboboxPortal;
+  Content: typeof ComboboxContent;
+  Listbox: typeof ComboboxListbox;
+  Item: typeof ComboboxItem;
+  ItemLabel: typeof ComboboxItemLabel;
+  ItemIndicator: typeof ComboboxItemIndicator;
+  Group: typeof ComboboxGroup;
+  HiddenSelect: typeof ComboboxHiddenSelect;
+}
+declare const Combobox: ComboboxComponent;
+//#endregion
+export { Combobox, ComboboxComponent, ComboboxContent, type ComboboxContentProps, ComboboxControl, type ComboboxControlProps, ComboboxGroup, type ComboboxGroupData, type ComboboxGroupProps, ComboboxHiddenSelect, type ComboboxHiddenSelectProps, ComboboxIcon, type ComboboxIconProps, ComboboxInput, type ComboboxInputProps, ComboboxItem, type ComboboxItemData, ComboboxItemIndicator, type ComboboxItemIndicatorProps, ComboboxItemLabel, type ComboboxItemLabelProps, type ComboboxItemProps, ComboboxListbox, type ComboboxListboxProps, ComboboxPortal, type ComboboxPortalProps, type ComboboxRenderGroupProps, type ComboboxRenderItemProps, ComboboxRoot, type ComboboxRootProps, ComboboxTrigger, type ComboboxTriggerProps, comboboxClass };
+//# sourceMappingURL=index.d.ts.map