@edo-w/flatline-solid 0.2.0

package/dist/src/components/combobox/combobox-input.jsx

@@ -0,0 +1,90 @@
+import clsx from 'clsx/lite';
+import { splitProps } from 'solid-js';
+import { comboboxClass } from './class';
+import { useComboboxContext } from './context';
+import { callEventHandler } from './util';
+export function ComboboxInput(props) {
+    const context = useComboboxContext();
+    const [local, rest] = splitProps(props, ['class', 'placeholder', 'onInput', 'onFocus', 'onKeyDown']);
+    const rootClass = () => clsx(comboboxClass.input, local.class);
+    const handleInput = (event) => {
+        callEventHandler(local.onInput, event);
+        if (!(event.currentTarget instanceof HTMLInputElement)) {
+            return;
+        }
+        context.setInputValue(event.currentTarget.value);
+    };
+    const handleFocus = (event) => {
+        callEventHandler(local.onFocus, event);
+        if (context.disabled() || context.readOnly()) {
+            return;
+        }
+    };
+    const handleKeyDown = (event) => {
+        callEventHandler(local.onKeyDown, event);
+        if (context.disabled() || context.readOnly()) {
+            return;
+        }
+        if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            if (context.isOpen()) {
+                context.highlightNext();
+                return;
+            }
+            context.openPopup('preserve');
+            return;
+        }
+        if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            if (context.isOpen()) {
+                context.highlightPrevious();
+                return;
+            }
+            context.openPopup('preserve');
+            return;
+        }
+        if (event.key === 'Home' && context.isOpen()) {
+            event.preventDefault();
+            context.highlightFirst();
+            return;
+        }
+        if (event.key === 'End' && context.isOpen()) {
+            event.preventDefault();
+            context.highlightLast();
+            return;
+        }
+        if (event.key === 'Enter' && context.isOpen()) {
+            const activeItem = context.visibleItems().find((item) => item.key === context.highlightedKey());
+            if (activeItem) {
+                event.preventDefault();
+                context.selectItem(activeItem);
+            }
+            return;
+        }
+        if (event.key === 'Escape') {
+            const input = event.currentTarget;
+            const selectionStart = input.selectionStart ?? 0;
+            const selectionEnd = input.selectionEnd ?? 0;
+            if (selectionStart !== selectionEnd) {
+                event.preventDefault();
+                input.setSelectionRange(selectionEnd, selectionEnd);
+                return;
+            }
+            if (context.selectedItem()) {
+                event.preventDefault();
+                context.clearSelectedItem();
+                return;
+            }
+            if (context.isOpen()) {
+                event.preventDefault();
+            }
+            context.closePopup(true);
+            return;
+        }
+        if (event.key === 'Tab') {
+            context.closePopup(true);
+        }
+    };
+    return (<input id={`${context.rootId}-input`} ref={context.setInputRef} class={rootClass()} type="text" role="combobox" value={context.inputValue()} placeholder={local.placeholder ?? context.placeholder()} disabled={context.disabled()} readOnly={context.readOnly()} required={context.required()} aria-autocomplete="list" aria-expanded={context.isOpen()} aria-controls={context.isOpen() ? `${context.rootId}-listbox` : undefined} aria-activedescendant={context.highlightedKey() ? context.getItemId(context.highlightedKey()) : undefined} onInput={handleInput} onFocus={handleFocus} onKeyDown={handleKeyDown} {...rest}/>);
+}
+//# sourceMappingURL=combobox-input.jsx.map

package/dist/src/components/combobox/combobox-input.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-input.jsx","sourceRoot":"","sources":["../../../../src/components/combobox/combobox-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import clsx from 'clsx/lite';\nimport { type JSX, splitProps } from 'solid-js';\nimport { comboboxClass } from './class';\nimport { useComboboxContext } from './context';\nimport type { ComboboxInputProps } from './types';\nimport { callEventHandler } from './util';\n\nexport function ComboboxInput(props: ComboboxInputProps) {\n\tconst context = useComboboxContext<any, any>();\n\tconst [local, rest] = splitProps(props, ['class', 'placeholder', 'onInput', 'onFocus', 'onKeyDown']);\n\tconst rootClass = () => clsx(comboboxClass.input, local.class);\n\n\tconst handleInput: JSX.EventHandlerUnion<HTMLInputElement, InputEvent> = (event) => {\n\t\tcallEventHandler(local.onInput, event);\n\n\t\tif (!(event.currentTarget instanceof HTMLInputElement)) {\n\t\t\treturn;\n\t\t}\n\n\t\tcontext.setInputValue(event.currentTarget.value);\n\t};\n\n\tconst handleFocus: JSX.EventHandlerUnion<HTMLInputElement, FocusEvent> = (event) => {\n\t\tcallEventHandler(local.onFocus, event);\n\n\t\tif (context.disabled() || context.readOnly()) {\n\t\t\treturn;\n\t\t}\n\t};\n\n\tconst handleKeyDown: JSX.EventHandlerUnion<HTMLInputElement, KeyboardEvent> = (event) => {\n\t\tcallEventHandler(local.onKeyDown, event);\n\n\t\tif (context.disabled() || context.readOnly()) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (event.key === 'ArrowDown') {\n\t\t\tevent.preventDefault();\n\n\t\t\tif (context.isOpen()) {\n\t\t\t\tcontext.highlightNext();\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tcontext.openPopup('preserve');\n\t\t\treturn;\n\t\t}\n\n\t\tif (event.key === 'ArrowUp') {\n\t\t\tevent.preventDefault();\n\n\t\t\tif (context.isOpen()) {\n\t\t\t\tcontext.highlightPrevious();\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tcontext.openPopup('preserve');\n\t\t\treturn;\n\t\t}\n\n\t\tif (event.key === 'Home' && context.isOpen()) {\n\t\t\tevent.preventDefault();\n\t\t\tcontext.highlightFirst();\n\t\t\treturn;\n\t\t}\n\n\t\tif (event.key === 'End' && context.isOpen()) {\n\t\t\tevent.preventDefault();\n\t\t\tcontext.highlightLast();\n\t\t\treturn;\n\t\t}\n\n\t\tif (event.key === 'Enter' && context.isOpen()) {\n\t\t\tconst activeItem = context.visibleItems().find((item) => item.key === context.highlightedKey());\n\n\t\t\tif (activeItem) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tcontext.selectItem(activeItem);\n\t\t\t}\n\n\t\t\treturn;\n\t\t}\n\n\t\tif (event.key === 'Escape') {\n\t\t\tconst input = event.currentTarget;\n\t\t\tconst selectionStart = input.selectionStart ?? 0;\n\t\t\tconst selectionEnd = input.selectionEnd ?? 0;\n\n\t\t\tif (selectionStart !== selectionEnd) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tinput.setSelectionRange(selectionEnd, selectionEnd);\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif (context.selectedItem()) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tcontext.clearSelectedItem();\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif (context.isOpen()) {\n\t\t\t\tevent.preventDefault();\n\t\t\t}\n\n\t\t\tcontext.closePopup(true);\n\t\t\treturn;\n\t\t}\n\n\t\tif (event.key === 'Tab') {\n\t\t\tcontext.closePopup(true);\n\t\t}\n\t};\n\n\treturn (\n\t\t<input\n\t\t\tid={`${context.rootId}-input`}\n\t\t\tref={context.setInputRef}\n\t\t\tclass={rootClass()}\n\t\t\ttype=\"text\"\n\t\t\trole=\"combobox\"\n\t\t\tvalue={context.inputValue()}\n\t\t\tplaceholder={local.placeholder ?? context.placeholder()}\n\t\t\tdisabled={context.disabled()}\n\t\t\treadOnly={context.readOnly()}\n\t\t\trequired={context.required()}\n\t\t\taria-autocomplete=\"list\"\n\t\t\taria-expanded={context.isOpen()}\n\t\t\taria-controls={context.isOpen() ? `${context.rootId}-listbox` : undefined}\n\t\t\taria-activedescendant={context.highlightedKey() ? context.getItemId(context.highlightedKey()!) : undefined}\n\t\t\tonInput={handleInput}\n\t\t\tonFocus={handleFocus}\n\t\t\tonKeyDown={handleKeyDown}\n\t\t\t{...rest}\n\t\t/>\n\t);\n}\n"]}

package/dist/src/components/combobox/combobox-item-indicator.css

@@ -0,0 +1,11 @@
+@layer components {
+	.fl-combobox_item-indicator {
+		/* layout */
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: var(--fl-size-4);
+		height: var(--fl-size-4);
+		flex: 0 0 auto;
+	}
+}

package/dist/src/components/combobox/combobox-item-indicator.d.ts

@@ -0,0 +1,2 @@
+import type { ComboboxItemIndicatorProps } from './types';
+export declare function ComboboxItemIndicator(props: ComboboxItemIndicatorProps): import("solid-js").JSX.Element;

package/dist/src/components/combobox/combobox-item-indicator.jsx

@@ -0,0 +1,16 @@
+import clsx from 'clsx/lite';
+import { Show, splitProps } from 'solid-js';
+import { CheckIcon } from '#src/icons';
+import { comboboxClass } from './class';
+import { useComboboxItemContext } from './context';
+export function ComboboxItemIndicator(props) {
+    const item = useComboboxItemContext();
+    const [local, rest] = splitProps(props, ['class', 'children']);
+    const rootClass = () => clsx(comboboxClass.itemIndicator, local.class);
+    return (<Show when={item.selected}>
+			<div class={rootClass()} {...rest}>
+				{local.children ?? <CheckIcon />}
+			</div>
+		</Show>);
+}
+//# sourceMappingURL=combobox-item-indicator.jsx.map

package/dist/src/components/combobox/combobox-item-indicator.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-item-indicator.jsx","sourceRoot":"","sources":["../../../../src/components/combobox/combobox-item-indicator.tsx"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,WAAW,CAAC;AAC7B,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AACxC,OAAO,EAAE,sBAAsB,EAAE,MAAM,WAAW,CAAC;AAGnD,MAAM,UAAU,qBAAqB,CAAC,KAAiC;IACtE,MAAM,IAAI,GAAG,sBAAsB,EAAO,CAAC;IAC3C,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,UAAU,CAAC,KAAK,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC;IAC/D,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,aAAa,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;IAEvE,OAAO,CACN,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACzB;GAAA,CAAC,GAAG,CACH,KAAK,CAAC,CAAC,SAAS,EAAE,CAAC,CACnB,IAAI,IAAI,CAAC,CAET;IAAA,CAAC,KAAK,CAAC,QAAQ,IAAI,CAAC,SAAS,CAAC,AAAD,EAAG,CACjC;GAAA,EAAE,GAAG,CACN;EAAA,EAAE,IAAI,CAAC,CACP,CAAC;AACH,CAAC","sourcesContent":["import clsx from 'clsx/lite';\nimport { Show, splitProps } from 'solid-js';\nimport { CheckIcon } from '#src/icons';\nimport { comboboxClass } from './class';\nimport { useComboboxItemContext } from './context';\nimport type { ComboboxItemIndicatorProps } from './types';\n\nexport function ComboboxItemIndicator(props: ComboboxItemIndicatorProps) {\n\tconst item = useComboboxItemContext<any>();\n\tconst [local, rest] = splitProps(props, ['class', 'children']);\n\tconst rootClass = () => clsx(comboboxClass.itemIndicator, local.class);\n\n\treturn (\n\t\t<Show when={item.selected}>\n\t\t\t<div\n\t\t\t\tclass={rootClass()}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t{local.children ?? <CheckIcon />}\n\t\t\t</div>\n\t\t</Show>\n\t);\n}\n"]}

package/dist/src/components/combobox/combobox-item-label.d.ts

@@ -0,0 +1,2 @@
+import type { ComboboxItemLabelProps } from './types';
+export declare function ComboboxItemLabel(props: ComboboxItemLabelProps): import("solid-js").JSX.Element;

package/dist/src/components/combobox/combobox-item-label.jsx

@@ -0,0 +1,13 @@
+import clsx from 'clsx/lite';
+import { splitProps } from 'solid-js';
+import { comboboxClass } from './class';
+import { useComboboxItemContext } from './context';
+export function ComboboxItemLabel(props) {
+    const item = useComboboxItemContext();
+    const [local, rest] = splitProps(props, ['class', 'children']);
+    const rootClass = () => clsx(comboboxClass.itemLabel, local.class);
+    return (<div class={rootClass()} {...rest}>
+			{local.children ?? item.item.textValue}
+		</div>);
+}
+//# sourceMappingURL=combobox-item-label.jsx.map

package/dist/src/components/combobox/combobox-item-label.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-item-label.jsx","sourceRoot":"","sources":["../../../../src/components/combobox/combobox-item-label.tsx"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,WAAW,CAAC;AAC7B,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AACxC,OAAO,EAAE,sBAAsB,EAAE,MAAM,WAAW,CAAC;AAGnD,MAAM,UAAU,iBAAiB,CAAC,KAA6B;IAC9D,MAAM,IAAI,GAAG,sBAAsB,EAAO,CAAC;IAC3C,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,UAAU,CAAC,KAAK,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC;IAC/D,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,SAAS,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;IAEnE,OAAO,CACN,CAAC,GAAG,CACH,KAAK,CAAC,CAAC,SAAS,EAAE,CAAC,CACnB,IAAI,IAAI,CAAC,CAET;GAAA,CAAC,KAAK,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,CACvC;EAAA,EAAE,GAAG,CAAC,CACN,CAAC;AACH,CAAC","sourcesContent":["import clsx from 'clsx/lite';\nimport { splitProps } from 'solid-js';\nimport { comboboxClass } from './class';\nimport { useComboboxItemContext } from './context';\nimport type { ComboboxItemLabelProps } from './types';\n\nexport function ComboboxItemLabel(props: ComboboxItemLabelProps) {\n\tconst item = useComboboxItemContext<any>();\n\tconst [local, rest] = splitProps(props, ['class', 'children']);\n\tconst rootClass = () => clsx(comboboxClass.itemLabel, local.class);\n\n\treturn (\n\t\t<div\n\t\t\tclass={rootClass()}\n\t\t\t{...rest}\n\t\t>\n\t\t\t{local.children ?? item.item.textValue}\n\t\t</div>\n\t);\n}\n"]}

package/dist/src/components/combobox/combobox-item.css

@@ -0,0 +1,48 @@
+@layer components {
+	.fl-combobox_item {
+		/* reset */
+		outline: none;
+
+		/* layout */
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		min-height: var(--fl-size-8);
+
+		/* spacing */
+		gap: var(--fl-size-2);
+		padding-inline: var(--fl-size-2);
+		padding-block: var(--fl-size-1-5);
+
+		/* background */
+		border-radius: var(--fl-radius-sm);
+
+		/* text */
+		color: var(--fl-body-text-color);
+		font: var(--fl-font-body);
+
+		/* pointer */
+		cursor: pointer;
+		user-select: none;
+	}
+
+	.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 {
+		/* layout */
+		flex: 1 1 auto;
+		min-width: 0;
+	}
+}

package/dist/src/components/combobox/combobox-item.d.ts

@@ -0,0 +1,3 @@
+import { type JSX } from 'solid-js';
+import type { ComboboxItemProps } from './types';
+export declare function ComboboxItem<TOption = any>(props: ComboboxItemProps<TOption>): JSX.Element;

package/dist/src/components/combobox/combobox-item.jsx

@@ -0,0 +1,30 @@
+import clsx from 'clsx/lite';
+import { splitProps } from 'solid-js';
+import { comboboxClass } from './class';
+import { ComboboxItemContext, useComboboxContext } from './context';
+import { callEventHandler } from './util';
+export function ComboboxItem(props) {
+    const context = useComboboxContext();
+    const [local, rest] = splitProps(props, ['class', 'item', 'children', 'onMouseEnter', 'onMouseDown', 'onClick']);
+    const rootClass = () => clsx(comboboxClass.item, local.class);
+    const selected = () => context.selectedItem()?.key === local.item.key;
+    const highlighted = () => context.highlightedKey() === local.item.key;
+    const handleMouseEnter = (event) => {
+        callEventHandler(local.onMouseEnter, event);
+        context.setHighlightedKey(local.item.key);
+    };
+    const handleMouseDown = (event) => {
+        callEventHandler(local.onMouseDown, event);
+        event.preventDefault();
+    };
+    const handleClick = (event) => {
+        callEventHandler(local.onClick, event);
+        context.selectItem(local.item);
+    };
+    return (<ComboboxItemContext.Provider value={{ item: local.item, selected: selected(), highlighted: highlighted() }}>
+			<li id={context.getItemId(local.item.key)} class={rootClass()} role="option" aria-selected={selected()} data-selected={selected() ? '' : undefined} data-highlighted={highlighted() ? '' : undefined} data-disabled={local.item.disabled ? '' : undefined} onMouseEnter={handleMouseEnter} onMouseDown={handleMouseDown} onClick={handleClick} {...rest}>
+				{local.children}
+			</li>
+		</ComboboxItemContext.Provider>);
+}
+//# sourceMappingURL=combobox-item.jsx.map

package/dist/src/components/combobox/combobox-item.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-item.jsx","sourceRoot":"","sources":["../../../../src/components/combobox/combobox-item.tsx"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,WAAW,CAAC;AAC7B,OAAO,EAAY,UAAU,EAAE,MAAM,UAAU,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AACxC,OAAO,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,WAAW,CAAC;AAEpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,QAAQ,CAAC;AAE1C,MAAM,UAAU,YAAY,CAAgB,KAAiC;IAC5E,MAAM,OAAO,GAAG,kBAAkB,EAAgB,CAAC;IACnD,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,UAAU,CAAC,KAAK,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,cAAc,EAAE,aAAa,EAAE,SAAS,CAAC,CAAC,CAAC;IACjH,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;IAC9D,MAAM,QAAQ,GAAG,GAAG,EAAE,CAAC,OAAO,CAAC,YAAY,EAAE,EAAE,GAAG,KAAK,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;IACtE,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,OAAO,CAAC,cAAc,EAAE,KAAK,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;IAEtE,MAAM,gBAAgB,GAAqD,CAAC,KAAK,EAAE,EAAE;QACpF,gBAAgB,CAAC,KAAK,CAAC,YAAY,EAAE,KAAK,CAAC,CAAC;QAC5C,OAAO,CAAC,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC3C,CAAC,CAAC;IAEF,MAAM,eAAe,GAAqD,CAAC,KAAK,EAAE,EAAE;QACnF,gBAAgB,CAAC,KAAK,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;QAC3C,KAAK,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC,CAAC;IAEF,MAAM,WAAW,GAAqD,CAAC,KAAK,EAAE,EAAE;QAC/E,gBAAgB,CAAC,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;QACvC,OAAO,CAAC,UAAU,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IAChC,CAAC,CAAC;IAEF,OAAO,CACN,CAAC,mBAAmB,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,WAAW,EAAE,WAAW,EAAE,EAAE,CAAC,CAC3G;GAAA,CAAC,EAAE,CACF,EAAE,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CACtC,KAAK,CAAC,CAAC,SAAS,EAAE,CAAC,CACnB,IAAI,CAAC,QAAQ,CACb,aAAa,CAAC,CAAC,QAAQ,EAAE,CAAC,CAC1B,aAAa,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAC3C,gBAAgB,CAAC,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CACjD,aAAa,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CACpD,YAAY,CAAC,CAAC,gBAAgB,CAAC,CAC/B,WAAW,CAAC,CAAC,eAAe,CAAC,CAC7B,OAAO,CAAC,CAAC,WAAW,CAAC,CACrB,IAAI,IAAI,CAAC,CAET;IAAA,CAAC,KAAK,CAAC,QAAQ,CAChB;GAAA,EAAE,EAAE,CACL;EAAA,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAC/B,CAAC;AACH,CAAC","sourcesContent":["import clsx from 'clsx/lite';\nimport { type JSX, splitProps } from 'solid-js';\nimport { comboboxClass } from './class';\nimport { ComboboxItemContext, useComboboxContext } from './context';\nimport type { ComboboxItemProps } from './types';\nimport { callEventHandler } from './util';\n\nexport function ComboboxItem<TOption = any>(props: ComboboxItemProps<TOption>) {\n\tconst context = useComboboxContext<TOption, any>();\n\tconst [local, rest] = splitProps(props, ['class', 'item', 'children', 'onMouseEnter', 'onMouseDown', 'onClick']);\n\tconst rootClass = () => clsx(comboboxClass.item, local.class);\n\tconst selected = () => context.selectedItem()?.key === local.item.key;\n\tconst highlighted = () => context.highlightedKey() === local.item.key;\n\n\tconst handleMouseEnter: JSX.EventHandlerUnion<HTMLLIElement, MouseEvent> = (event) => {\n\t\tcallEventHandler(local.onMouseEnter, event);\n\t\tcontext.setHighlightedKey(local.item.key);\n\t};\n\n\tconst handleMouseDown: JSX.EventHandlerUnion<HTMLLIElement, MouseEvent> = (event) => {\n\t\tcallEventHandler(local.onMouseDown, event);\n\t\tevent.preventDefault();\n\t};\n\n\tconst handleClick: JSX.EventHandlerUnion<HTMLLIElement, MouseEvent> = (event) => {\n\t\tcallEventHandler(local.onClick, event);\n\t\tcontext.selectItem(local.item);\n\t};\n\n\treturn (\n\t\t<ComboboxItemContext.Provider value={{ item: local.item, selected: selected(), highlighted: highlighted() }}>\n\t\t\t<li\n\t\t\t\tid={context.getItemId(local.item.key)}\n\t\t\t\tclass={rootClass()}\n\t\t\t\trole=\"option\"\n\t\t\t\taria-selected={selected()}\n\t\t\t\tdata-selected={selected() ? '' : undefined}\n\t\t\t\tdata-highlighted={highlighted() ? '' : undefined}\n\t\t\t\tdata-disabled={local.item.disabled ? '' : undefined}\n\t\t\t\tonMouseEnter={handleMouseEnter}\n\t\t\t\tonMouseDown={handleMouseDown}\n\t\t\t\tonClick={handleClick}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t{local.children}\n\t\t\t</li>\n\t\t</ComboboxItemContext.Provider>\n\t);\n}\n"]}

package/dist/src/components/combobox/combobox-listbox.css

@@ -0,0 +1,18 @@
+@layer components {
+	.fl-combobox_listbox {
+		/* reset */
+		list-style: none;
+
+		/* layout */
+		max-height: inherit;
+		overflow-y: auto;
+
+		/* spacing */
+		margin: 0;
+		padding: var(--fl-size-2);
+	}
+
+	.fl-combobox_listbox:focus {
+		outline: none;
+	}
+}

package/dist/src/components/combobox/combobox-listbox.d.ts

@@ -0,0 +1,2 @@
+import type { ComboboxListboxProps } from './types';
+export declare function ComboboxListbox<TOption = any, TOptionGroup = never>(props: ComboboxListboxProps): import("solid-js").JSX.Element;

package/dist/src/components/combobox/combobox-listbox.jsx

@@ -0,0 +1,39 @@
+import clsx from 'clsx/lite';
+import { For, Show, splitProps } from 'solid-js';
+import { comboboxClass } from './class';
+import { ComboboxGroup } from './combobox-group';
+import { ComboboxItem } from './combobox-item';
+import { ComboboxItemIndicator } from './combobox-item-indicator';
+import { ComboboxItemLabel } from './combobox-item-label';
+import { useComboboxContext } from './context';
+function DefaultItemComponent(props) {
+    return (<ComboboxItem item={props.item}>
+			<ComboboxItemLabel>{props.item.textValue}</ComboboxItemLabel>
+			<ComboboxItemIndicator />
+		</ComboboxItem>);
+}
+function DefaultGroupComponent(props) {
+    return <ComboboxGroup>{props.group.textValue}</ComboboxGroup>;
+}
+export function ComboboxListbox(props) {
+    const context = useComboboxContext();
+    const [local, rest] = splitProps(props, ['class', 'children']);
+    const rootClass = () => clsx(comboboxClass.listbox, local.class);
+    const ItemComponent = () => context.itemComponent ?? DefaultItemComponent;
+    const GroupComponent = () => context.groupComponent ?? DefaultGroupComponent;
+    return (<ul id={`${context.rootId}-listbox`} class={rootClass()} role="listbox" {...rest}>
+			{local.children ?? (<For each={context.visibleGroups()}>
+					{(group) => {
+                const GroupRenderer = GroupComponent();
+                const ItemRenderer = ItemComponent();
+                return (<>
+								<Show when={group.rawValue !== undefined}>
+									<GroupRenderer group={group}/>
+								</Show>
+								<For each={group.items}>{(item) => <ItemRenderer item={item}/>}</For>
+							</>);
+            }}
+				</For>)}
+		</ul>);
+}
+//# sourceMappingURL=combobox-listbox.jsx.map

package/dist/src/components/combobox/combobox-listbox.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-listbox.jsx","sourceRoot":"","sources":["../../../../src/components/combobox/combobox-listbox.tsx"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,WAAW,CAAC;AAC7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AACxC,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAClE,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,WAAW,CAAC;AAG/C,SAAS,oBAAoB,CAAU,KAAuC;IAC7E,OAAO,CACN,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAC9B;GAAA,CAAC,iBAAiB,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,iBAAiB,CAC5D;GAAA,CAAC,qBAAqB,CAAC,AAAD,EACvB;EAAA,EAAE,YAAY,CAAC,CACf,CAAC;AACH,CAAC;AAED,SAAS,qBAAqB,CAAe,KAA6C;IACzF,OAAO,CAAC,aAAa,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,EAAE,aAAa,CAAC,CAAC;AAC/D,CAAC;AAED,MAAM,UAAU,eAAe,CAAsC,KAA2B;IAC/F,MAAM,OAAO,GAAG,kBAAkB,EAAyB,CAAC;IAC5D,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,UAAU,CAAC,KAAK,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC;IAC/D,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;IACjE,MAAM,aAAa,GAAG,GAAG,EAAE,CAAC,OAAO,CAAC,aAAa,IAAI,oBAA6B,CAAC;IACnF,MAAM,cAAc,GAAG,GAAG,EAAE,CAAC,OAAO,CAAC,cAAc,IAAI,qBAAmC,CAAC;IAE3F,OAAO,CACN,CAAC,EAAE,CACF,EAAE,CAAC,CAAC,GAAG,OAAO,CAAC,MAAM,UAAU,CAAC,CAChC,KAAK,CAAC,CAAC,SAAS,EAAE,CAAC,CACnB,IAAI,CAAC,SAAS,CACd,IAAI,IAAI,CAAC,CAET;GAAA,CAAC,KAAK,CAAC,QAAQ,IAAI,CAClB,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,aAAa,EAAE,CAAC,CAClC;KAAA,CAAC,CAAC,KAAK,EAAE,EAAE;gBACV,MAAM,aAAa,GAAG,cAAc,EAAE,CAAC;gBACvC,MAAM,YAAY,GAAG,aAAa,EAAE,CAAC;gBAErC,OAAO,CACN,EACC;QAAA,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,QAAQ,KAAK,SAAS,CAAC,CACxC;SAAA,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,EAC7B;QAAA,EAAE,IAAI,CACN;QAAA,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,EAAG,CAAC,EAAE,GAAG,CACtE;OAAA,GAAG,CACH,CAAC;YACH,CAAC,CACF;IAAA,EAAE,GAAG,CAAC,CACN,CACF;EAAA,EAAE,EAAE,CAAC,CACL,CAAC;AACH,CAAC","sourcesContent":["import clsx from 'clsx/lite';\nimport { For, Show, splitProps } from 'solid-js';\nimport { comboboxClass } from './class';\nimport { ComboboxGroup } from './combobox-group';\nimport { ComboboxItem } from './combobox-item';\nimport { ComboboxItemIndicator } from './combobox-item-indicator';\nimport { ComboboxItemLabel } from './combobox-item-label';\nimport { useComboboxContext } from './context';\nimport type { ComboboxListboxProps, ComboboxRenderGroupProps, ComboboxRenderItemProps } from './types';\n\nfunction DefaultItemComponent<TOption>(props: ComboboxRenderItemProps<TOption>) {\n\treturn (\n\t\t<ComboboxItem item={props.item}>\n\t\t\t<ComboboxItemLabel>{props.item.textValue}</ComboboxItemLabel>\n\t\t\t<ComboboxItemIndicator />\n\t\t</ComboboxItem>\n\t);\n}\n\nfunction DefaultGroupComponent<TOptionGroup>(props: ComboboxRenderGroupProps<TOptionGroup>) {\n\treturn <ComboboxGroup>{props.group.textValue}</ComboboxGroup>;\n}\n\nexport function ComboboxListbox<TOption = any, TOptionGroup = never>(props: ComboboxListboxProps) {\n\tconst context = useComboboxContext<TOption, TOptionGroup>();\n\tconst [local, rest] = splitProps(props, ['class', 'children']);\n\tconst rootClass = () => clsx(comboboxClass.listbox, local.class);\n\tconst ItemComponent = () => context.itemComponent ?? DefaultItemComponent<TOption>;\n\tconst GroupComponent = () => context.groupComponent ?? DefaultGroupComponent<TOptionGroup>;\n\n\treturn (\n\t\t<ul\n\t\t\tid={`${context.rootId}-listbox`}\n\t\t\tclass={rootClass()}\n\t\t\trole=\"listbox\"\n\t\t\t{...rest}\n\t\t>\n\t\t\t{local.children ?? (\n\t\t\t\t<For each={context.visibleGroups()}>\n\t\t\t\t\t{(group) => {\n\t\t\t\t\t\tconst GroupRenderer = GroupComponent();\n\t\t\t\t\t\tconst ItemRenderer = ItemComponent();\n\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<Show when={group.rawValue !== undefined}>\n\t\t\t\t\t\t\t\t\t<GroupRenderer group={group} />\n\t\t\t\t\t\t\t\t</Show>\n\t\t\t\t\t\t\t\t<For each={group.items}>{(item) => <ItemRenderer item={item} />}</For>\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t);\n\t\t\t\t\t}}\n\t\t\t\t</For>\n\t\t\t)}\n\t\t</ul>\n\t);\n}\n"]}

package/dist/src/components/combobox/combobox-portal.d.ts

@@ -0,0 +1,2 @@
+import type { ComboboxPortalProps } from './types';
+export declare function ComboboxPortal(props: ComboboxPortalProps): import("solid-js").JSX.Element;

package/dist/src/components/combobox/combobox-portal.jsx

@@ -0,0 +1,6 @@
+import { children } from 'solid-js';
+export function ComboboxPortal(props) {
+    const resolvedChildren = children(() => props.children);
+    return <>{resolvedChildren()}</>;
+}
+//# sourceMappingURL=combobox-portal.jsx.map

package/dist/src/components/combobox/combobox-portal.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-portal.jsx","sourceRoot":"","sources":["../../../../src/components/combobox/combobox-portal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAGpC,MAAM,UAAU,cAAc,CAAC,KAA0B;IACxD,MAAM,gBAAgB,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IAExD,OAAO,EAAE,CAAC,gBAAgB,EAAE,CAAC,GAAG,CAAC;AAClC,CAAC","sourcesContent":["import { children } from 'solid-js';\nimport type { ComboboxPortalProps } from './types';\n\nexport function ComboboxPortal(props: ComboboxPortalProps) {\n\tconst resolvedChildren = children(() => props.children);\n\n\treturn <>{resolvedChildren()}</>;\n}\n"]}

package/dist/src/components/combobox/combobox-root.css

@@ -0,0 +1,12 @@
+@layer components {
+	.fl-combobox {
+		/* layout */
+		position: relative;
+		display: inline-flex;
+		flex-direction: column;
+		width: 100%;
+
+		/* spacing */
+		gap: var(--fl-size-1);
+	}
+}

package/dist/src/components/combobox/combobox-root.d.ts

@@ -0,0 +1,3 @@
+import { type JSX } from 'solid-js';
+import type { ComboboxRootProps } from './types';
+export declare function ComboboxRoot<TOption, TOptionGroup = never>(props: ComboboxRootProps<TOption, TOptionGroup>): JSX.Element;