@refraktor/core 0.0.2 → 0.0.4

package/build/components/chip/chip.test.js

@@ -0,0 +1,107 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createRef, useState } from "react";
+import { describe, expect, it, vi } from "vitest";
+import { render, screen, userEvent } from "../../vitest";
+import Chip from "./chip";
+describe("@refraktor/core/Chip", () => {
+    it("renders correctly", async () => {
+        await render(_jsx(Chip, { children: "React" }));
+        expect(screen.getByText("React")).toBeInTheDocument();
+    });
+    it("forwards ref correctly", async () => {
+        const ref = createRef();
+        await render(_jsx(Chip, { ref: ref, children: "React" }));
+        expect(ref.current).toBeInstanceOf(HTMLDivElement);
+        expect(ref.current?.tagName).toBe("DIV");
+    });
+    it("supports uncontrolled selected state when selectable", async () => {
+        const user = userEvent.setup();
+        await render(_jsx(Chip, { selectable: true, children: "React" }));
+        const chip = screen.getByRole("button", { name: "React" });
+        expect(chip).toHaveAttribute("aria-pressed", "false");
+        await user.click(chip);
+        expect(chip).toHaveAttribute("aria-pressed", "true");
+    });
+    it("supports controlled selected state", async () => {
+        const user = userEvent.setup();
+        function Demo() {
+            const [selected, setSelected] = useState(false);
+            return (_jsx(Chip, { selectable: true, selected: selected, onSelectedChange: setSelected, children: "React" }));
+        }
+        await render(_jsx(Demo, {}));
+        const chip = screen.getByRole("button", { name: "React" });
+        await user.click(chip);
+        expect(chip).toHaveAttribute("aria-pressed", "true");
+    });
+    it("handles keyboard toggling", async () => {
+        const user = userEvent.setup();
+        await render(_jsx(Chip, { selectable: true, children: "Vue" }));
+        const chip = screen.getByRole("button", { name: "Vue" });
+        chip.focus();
+        await user.keyboard("{Space}");
+        expect(chip).toHaveAttribute("aria-pressed", "true");
+        await user.keyboard("{Enter}");
+        expect(chip).toHaveAttribute("aria-pressed", "false");
+    });
+    it("calls onRemove and does not toggle selection", async () => {
+        const user = userEvent.setup();
+        const onRemove = vi.fn();
+        await render(_jsx(Chip, { selectable: true, removable: true, onRemove: onRemove, defaultSelected: true, children: "Svelte" }));
+        const chip = screen.getByRole("button", { name: "Svelte" });
+        const removeButton = screen.getByRole("button", { name: "Remove chip" });
+        expect(chip).toHaveAttribute("aria-pressed", "true");
+        await user.click(removeButton);
+        expect(onRemove).toHaveBeenCalledTimes(1);
+        expect(chip).toHaveAttribute("aria-pressed", "false");
+    });
+    it("supports group selection", async () => {
+        const user = userEvent.setup();
+        const onChange = vi.fn();
+        await render(_jsxs(Chip.Group, { defaultValue: ["react"], onChange: onChange, children: [_jsx(Chip, { value: "react", children: "React" }), _jsx(Chip, { value: "vue", children: "Vue" })] }));
+        const reactChip = screen.getByRole("button", { name: "React" });
+        const vueChip = screen.getByRole("button", { name: "Vue" });
+        expect(reactChip).toHaveAttribute("aria-pressed", "true");
+        expect(vueChip).toHaveAttribute("aria-pressed", "false");
+        await user.click(vueChip);
+        expect(onChange).toHaveBeenLastCalledWith(["react", "vue"]);
+        await user.click(reactChip);
+        expect(onChange).toHaveBeenLastCalledWith(["vue"]);
+    });
+    it("removes value from group with removable chip", async () => {
+        const user = userEvent.setup();
+        const onChange = vi.fn();
+        await render(_jsx(Chip.Group, { defaultValue: ["react"], onChange: onChange, children: _jsx(Chip, { value: "react", removable: true, children: "React" }) }));
+        await user.click(screen.getByRole("button", { name: "Remove chip" }));
+        expect(onChange).toHaveBeenLastCalledWith([]);
+    });
+    it("supports disabled state from group", async () => {
+        const user = userEvent.setup();
+        const onChange = vi.fn();
+        await render(_jsx(Chip.Group, { disabled: true, onChange: onChange, children: _jsx(Chip, { value: "react", children: "React" }) }));
+        const chip = screen.getByRole("button", { name: "React" });
+        await user.click(chip);
+        expect(chip).toHaveAttribute("aria-disabled", "true");
+        expect(onChange).not.toHaveBeenCalled();
+    });
+    it("supports hidden inputs from group name", async () => {
+        const { container } = await render(_jsxs(Chip.Group, { name: "frameworks", defaultValue: ["react", "vue"], children: [_jsx(Chip, { value: "react", children: "React" }), _jsx(Chip, { value: "vue", children: "Vue" })] }));
+        const hiddenInputs = container.querySelectorAll('input[type="hidden"][name="frameworks"]');
+        expect(hiddenInputs).toHaveLength(2);
+        expect(Array.from(hiddenInputs).map((item) => item.value)).toEqual(["react", "vue"]);
+    });
+    it("supports root and slot class names", async () => {
+        const { container } = await render(_jsx(Chip, { className: "custom-root", classNames: {
+                label: "custom-label",
+                removeButton: "custom-remove-button",
+                removeIcon: "custom-remove-icon"
+            }, removable: true, children: "React" }));
+        const root = container.firstElementChild;
+        const label = screen.getByText("React");
+        const removeButton = screen.getByRole("button", { name: "Remove chip" });
+        const removeIcon = removeButton.querySelector("span");
+        expect(root).toHaveClass("custom-root");
+        expect(label).toHaveClass("custom-label");
+        expect(removeButton).toHaveClass("custom-remove-button");
+        expect(removeIcon).toHaveClass("custom-remove-icon");
+    });
+});

package/build/components/chip/chip.types.d.ts

@@ -0,0 +1,95 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { RefraktorRadius, RefraktorSize } from "../../theme";
+import { createClassNamesConfig, createComponentConfig, FactoryPayload } from "../../utils";
+import { ChipGroup } from "./chip-group";
+export type ChipVariant = "default" | "outline";
+export type ChipGroupOrientation = "horizontal" | "vertical";
+export type ChipClassNames = {
+    root?: string;
+    leftSection?: string;
+    label?: string;
+    rightSection?: string;
+    removeButton?: string;
+    removeIcon?: string;
+};
+export type ChipGroupClassNames = {
+    root?: string;
+};
+export interface ChipProps extends ComponentPropsWithoutRef<"div"> {
+    /** The value used by Chip.Group */
+    value?: string;
+    /** The selected state of the chip (controlled) */
+    selected?: boolean;
+    /** The initial selected state of the chip (uncontrolled) */
+    defaultSelected?: boolean;
+    /** Callback called when selected state changes */
+    onSelectedChange?: (selected: boolean) => void;
+    /** Whether chip can be toggled @default `false` */
+    selectable?: boolean;
+    /** Whether to show remove button @default `false` */
+    removable?: boolean;
+    /** Callback called when remove button is clicked */
+    onRemove?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Accessible label for remove button */
+    removeButtonLabel?: string;
+    /** Content rendered at the start of the chip */
+    leftSection?: ReactNode;
+    /** Content rendered before remove button at the end of the chip */
+    rightSection?: ReactNode;
+    /** The size of the chip @default `sm` */
+    size?: RefraktorSize;
+    /** The radius of the chip @default `full` */
+    radius?: RefraktorRadius;
+    /** The variant of the chip @default `default` */
+    variant?: ChipVariant;
+    /** Whether chip is disabled @default `false` */
+    disabled?: boolean;
+    /** Used for editing root class name */
+    className?: string;
+    /** Used for styling different parts of the component */
+    classNames?: ChipClassNames;
+}
+export interface ChipGroupProps extends Omit<ComponentPropsWithoutRef<"div">, "onChange"> {
+    /** Chip components to render */
+    children: ReactNode;
+    /** Selected values (controlled) */
+    value?: string[];
+    /** Initial selected values (uncontrolled) */
+    defaultValue?: string[];
+    /** Callback called when values change */
+    onChange?: (value: string[]) => void;
+    /** Hidden input name used for form submission */
+    name?: string;
+    /** Whether all chips in group are disabled */
+    disabled?: boolean;
+    /** Shared chip size */
+    size?: RefraktorSize;
+    /** Shared chip radius */
+    radius?: RefraktorRadius;
+    /** Shared chip variant */
+    variant?: ChipVariant;
+    /** Layout direction @default `horizontal` */
+    orientation?: ChipGroupOrientation;
+    /** Used for editing root class name */
+    className?: string;
+    /** Used for styling different parts of the component */
+    classNames?: ChipGroupClassNames;
+}
+export interface ChipFactoryPayload extends FactoryPayload {
+    props: ChipProps;
+    ref: HTMLDivElement;
+    compound: {
+        configure: ReturnType<typeof createComponentConfig<ChipProps>>;
+        classNames: ReturnType<typeof createClassNamesConfig<ChipClassNames>>;
+        Group: typeof ChipGroup;
+    };
+}
+export interface ChipGroupFactoryPayload extends FactoryPayload {
+    props: ChipGroupProps;
+    ref: HTMLDivElement;
+    compound: {
+        configure: ReturnType<typeof createComponentConfig<ChipGroupProps>>;
+        classNames: ReturnType<typeof createClassNamesConfig<ChipGroupClassNames>>;
+    };
+}
+//# sourceMappingURL=chip.types.d.ts.map

package/build/components/chip/chip.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip.types.d.ts","sourceRoot":"","sources":["../../../src/components/chip/chip.types.ts"],"names":[],"mappings":"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"}

package/build/components/chip/chip.types.js

@@ -0,0 +1 @@
+export {};

package/build/components/chip/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Chip } from "./chip";
+export { ChipGroup } from "./chip-group";
+export type { ChipProps, ChipClassNames, ChipVariant, ChipGroupProps, ChipGroupClassNames, ChipGroupOrientation } from "./chip.types";
+//# sourceMappingURL=index.d.ts.map

package/build/components/chip/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/chip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,YAAY,EACR,SAAS,EACT,cAAc,EACd,WAAW,EACX,cAAc,EACd,mBAAmB,EACnB,oBAAoB,EACvB,MAAM,cAAc,CAAC"}

package/build/components/chip/index.js

@@ -0,0 +1,2 @@
+export { default as Chip } from "./chip";
+export { ChipGroup } from "./chip-group";

package/build/components/combobox/combobox-dropdown/combobox-dropdown.d.ts

@@ -0,0 +1,4 @@
+import type { ComboboxDropdownFactoryPayload } from "../combobox.types";
+declare const ComboboxDropdown: import("../../..").RefraktorComponent<ComboboxDropdownFactoryPayload>;
+export default ComboboxDropdown;
+//# sourceMappingURL=combobox-dropdown.d.ts.map

package/build/components/combobox/combobox-dropdown/combobox-dropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-dropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/combobox/combobox-dropdown/combobox-dropdown.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,8BAA8B,EAAE,MAAM,mBAAmB,CAAC;AAOxE,QAAA,MAAM,gBAAgB,uEA8ErB,CAAC;AAIF,eAAe,gBAAgB,CAAC"}

package/build/components/combobox/combobox-dropdown/combobox-dropdown.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTheme } from "../../../theme";
+import { factory } from "../../../utils";
+import { Transition } from "../../transition";
+import { useComboboxContext } from "../combobox.context";
+import { FloatingFocusManager, FloatingPortal, useMergeRefs } from "@floating-ui/react";
+const ComboboxDropdown = factory(({ children, className, style, ...props }, ref) => {
+    const { cx, getRadius } = useTheme();
+    const combobox = useComboboxContext();
+    const referenceWidth = combobox.combobox.refs.reference.current?.offsetWidth;
+    const dropdownContent = (_jsx(Transition, { transition: "fade", duration: 150, mounted: combobox.combobox.opened, style: { position: "relative", zIndex: 1000 }, ...combobox.transitionProps, children: _jsx("div", { ref: useMergeRefs([ref, combobox.combobox.refs.setFloating]), id: combobox.listId, role: "listbox", "aria-labelledby": combobox.inputId, tabIndex: -1, style: {
+                ...combobox.combobox.floatingStyles,
+                zIndex: 1000,
+                width: referenceWidth,
+                ...style
+            }, className: cx("z-50 min-w-32 bg-[var(--refraktor-bg)] text-[var(--refraktor-text)] shadow-md border border-[var(--refraktor-border)]", getRadius(combobox.radius), combobox.getStyles("dropdown"), className), ...combobox.combobox.getFloatingProps(), ...props, children: _jsxs("div", { className: cx("max-h-80 overflow-y-auto refraktor-scrollbar p-1", combobox.getStyles("options")), children: [children, !combobox.hasVisibleItems() && (_jsx("div", { className: cx("px-1.5 py-1.5 text-sm text-[var(--refraktor-text-secondary)]", combobox.getStyles("empty")), children: combobox.nothingFound }))] }) }) }));
+    const wrappedContent = (_jsx(FloatingFocusManager, { context: combobox.combobox.context, modal: false, initialFocus: -1, returnFocus: false, disabled: !combobox.combobox.opened, children: dropdownContent }));
+    return combobox.withinPortal ? (_jsx(FloatingPortal, { children: wrappedContent })) : (wrappedContent);
+});
+ComboboxDropdown.displayName = "@refraktor/core/Combobox.Dropdown";
+export default ComboboxDropdown;

package/build/components/combobox/combobox-dropdown/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ComboboxDropdown } from "./combobox-dropdown";
+//# sourceMappingURL=index.d.ts.map

package/build/components/combobox/combobox-dropdown/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/combobox/combobox-dropdown/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,qBAAqB,CAAC"}

package/build/components/combobox/combobox-dropdown/index.js

@@ -0,0 +1 @@
+export { default as ComboboxDropdown } from "./combobox-dropdown";

package/build/components/combobox/combobox-group/combobox-group.d.ts

@@ -0,0 +1,4 @@
+import type { ComboboxGroupFactoryPayload } from "../combobox.types";
+declare const ComboboxGroup: import("../../..").RefraktorComponent<ComboboxGroupFactoryPayload>;
+export default ComboboxGroup;
+//# sourceMappingURL=combobox-group.d.ts.map

package/build/components/combobox/combobox-group/combobox-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-group.d.ts","sourceRoot":"","sources":["../../../../src/components/combobox/combobox-group/combobox-group.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,mBAAmB,CAAC;AAErE,QAAA,MAAM,aAAa,oEAoClB,CAAC;AAIF,eAAe,aAAa,CAAC"}

package/build/components/combobox/combobox-group/combobox-group.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "@refraktor/utils";
+import { useTheme } from "../../../theme";
+import { factory } from "../../../utils";
+import { ComboboxGroupProvider, useComboboxContext } from "../combobox.context";
+const ComboboxGroup = factory(({ id, label, children, className, ...props }, ref) => {
+    const { cx } = useTheme();
+    const combobox = useComboboxContext();
+    const _id = useId(id);
+    const labelId = `${_id}-label`;
+    const isVisible = combobox.isGroupVisible(_id);
+    return (_jsx(ComboboxGroupProvider, { value: { groupId: _id }, children: _jsxs("div", { ref: ref, role: "group", "aria-labelledby": label ? labelId : undefined, hidden: !isVisible, className: cx("py-1", combobox.getStyles("group"), className), ...props, children: [label && (_jsx("div", { id: labelId, className: cx("px-1.5 pb-1 text-xs font-medium text-[var(--refraktor-text-secondary)]", combobox.getStyles("groupLabel")), children: label })), children] }) }));
+});
+ComboboxGroup.displayName = "@refraktor/core/Combobox.Group";
+export default ComboboxGroup;

package/build/components/combobox/combobox-group/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ComboboxGroup } from "./combobox-group";
+//# sourceMappingURL=index.d.ts.map

package/build/components/combobox/combobox-group/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/combobox/combobox-group/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,kBAAkB,CAAC"}

package/build/components/combobox/combobox-group/index.js

@@ -0,0 +1 @@
+export { default as ComboboxGroup } from "./combobox-group";

package/build/components/combobox/combobox-input/combobox-input.d.ts

@@ -0,0 +1,4 @@
+import type { ComboboxInputFactoryPayload } from "../combobox.types";
+declare const ComboboxInput: import("../../..").RefraktorComponent<ComboboxInputFactoryPayload>;
+export default ComboboxInput;
+//# sourceMappingURL=combobox-input.d.ts.map

package/build/components/combobox/combobox-input/combobox-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-input.d.ts","sourceRoot":"","sources":["../../../../src/components/combobox/combobox-input/combobox-input.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,mBAAmB,CAAC;AAErE,QAAA,MAAM,aAAa,oEAgLlB,CAAC;AAIF,eAAe,aAAa,CAAC"}

package/build/components/combobox/combobox-input/combobox-input.js

@@ -0,0 +1,101 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ChevronIcon } from "../../../icons";
+import { useTheme } from "../../../theme";
+import { factory } from "../../../utils";
+import { InputField } from "../../input/input-field";
+import { useComboboxContext } from "../combobox.context";
+const ComboboxInput = factory(({ className, placeholder, leftSection, rightSection, onKeyDown, ...props }, ref) => {
+    const { cx } = useTheme();
+    const combobox = useComboboxContext();
+    return (_jsx("div", { ref: (node) => {
+            combobox.combobox.refs.setReference(node);
+            if (typeof ref === "function") {
+                ref(node);
+            }
+            else if (ref) {
+                ref.current = node;
+            }
+        }, className: cx("w-full", combobox.getStyles("input"), className), "data-opened": combobox.combobox.opened, ...combobox.combobox.getReferenceProps({
+            onKeyDown: (event) => {
+                onKeyDown?.(event);
+                if (event.defaultPrevented || combobox.disabled) {
+                    return;
+                }
+                if (event.key === "ArrowDown") {
+                    event.preventDefault();
+                    if (!combobox.combobox.opened) {
+                        combobox.combobox.open();
+                        requestAnimationFrame(combobox.setActiveToSelectedOrFirst);
+                        return;
+                    }
+                    combobox.moveActiveOption(1);
+                    return;
+                }
+                if (event.key === "ArrowUp") {
+                    event.preventDefault();
+                    if (!combobox.combobox.opened) {
+                        combobox.combobox.open();
+                        requestAnimationFrame(combobox.setActiveToLast);
+                        return;
+                    }
+                    combobox.moveActiveOption(-1);
+                    return;
+                }
+                if (event.key === "Home" && combobox.combobox.opened) {
+                    event.preventDefault();
+                    combobox.setActiveToFirst();
+                    return;
+                }
+                if (event.key === "End" && combobox.combobox.opened) {
+                    event.preventDefault();
+                    combobox.setActiveToLast();
+                    return;
+                }
+                if (event.key === "Enter") {
+                    if (!combobox.combobox.opened) {
+                        combobox.combobox.open();
+                        requestAnimationFrame(combobox.setActiveToSelectedOrFirst);
+                        return;
+                    }
+                    event.preventDefault();
+                    combobox.selectActiveOption();
+                    return;
+                }
+                if (event.key === "Escape" && combobox.combobox.opened) {
+                    event.preventDefault();
+                    combobox.combobox.close();
+                    if (combobox.value !== null) {
+                        combobox.setSearch(combobox.getSelectedLabel());
+                    }
+                    return;
+                }
+                if (event.key === "Tab") {
+                    combobox.combobox.close();
+                }
+            }
+        }), ...props, children: _jsx(InputField, { id: combobox.inputId, ref: (node) => {
+                combobox.inputRef.current = node;
+            }, required: combobox.required, error: combobox.error, disabled: combobox.disabled, value: combobox.search, placeholder: placeholder ?? combobox.placeholder, size: combobox.size, radius: combobox.radius, variant: combobox.variant, role: "combobox", autoComplete: "off", "aria-expanded": combobox.combobox.opened, "aria-controls": combobox.listId, "aria-haspopup": "listbox", "aria-autocomplete": "list", "aria-disabled": combobox.disabled, "aria-activedescendant": combobox.combobox.opened
+                ? combobox.activeOptionId ?? undefined
+                : undefined, className: cx("cursor-text", combobox.getStyles("inputField")), leftSection: leftSection, rightSection: rightSection ?? (_jsx(ChevronIcon, { direction: "down", size: 14, className: cx("transition-transform", combobox.combobox.opened && "rotate-180", combobox.getStyles("inputIcon")) })), onFocus: () => {
+                if (combobox.openOnFocus && !combobox.disabled) {
+                    combobox.combobox.open();
+                }
+            }, onClick: () => {
+                if (!combobox.disabled && !combobox.combobox.opened) {
+                    combobox.combobox.open();
+                }
+            }, onChange: (event) => {
+                const nextSearch = event.currentTarget.value;
+                combobox.setSearch(nextSearch);
+                if (combobox.value !== null &&
+                    nextSearch !== combobox.getSelectedLabel()) {
+                    combobox.clearValue();
+                }
+                if (!combobox.combobox.opened && !combobox.disabled) {
+                    combobox.combobox.open();
+                }
+            } }) }));
+});
+ComboboxInput.displayName = "@refraktor/core/Combobox.Input";
+export default ComboboxInput;

package/build/components/combobox/combobox-input/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ComboboxInput } from "./combobox-input";
+//# sourceMappingURL=index.d.ts.map

package/build/components/combobox/combobox-input/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/combobox/combobox-input/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,kBAAkB,CAAC"}

package/build/components/combobox/combobox-input/index.js

@@ -0,0 +1 @@
+export { default as ComboboxInput } from "./combobox-input";

package/build/components/combobox/combobox-option/combobox-option.d.ts

@@ -0,0 +1,4 @@
+import type { ComboboxOptionFactoryPayload } from "../combobox.types";
+declare const ComboboxOption: import("../../..").RefraktorComponent<ComboboxOptionFactoryPayload>;
+export default ComboboxOption;
+//# sourceMappingURL=combobox-option.d.ts.map

package/build/components/combobox/combobox-option/combobox-option.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-option.d.ts","sourceRoot":"","sources":["../../../../src/components/combobox/combobox-option/combobox-option.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,mBAAmB,CAAC;AAEtE,QAAA,MAAM,cAAc,qEAwJnB,CAAC;AAIF,eAAe,cAAc,CAAC"}

package/build/components/combobox/combobox-option/combobox-option.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "@refraktor/utils";
+import { useCallback, useEffect, useRef } from "react";
+import { CheckIcon } from "../../../icons";
+import { getRadius, useTheme } from "../../../theme";
+import { factory } from "../../../utils";
+import { getNodeTextValue, useComboboxContext, useComboboxGroupContext } from "../combobox.context";
+const ComboboxOption = factory(({ id, value, children, disabled, textValue, className, onClick, onMouseMove, onKeyDown, onSelect, ...props }, ref) => {
+    const { cx } = useTheme();
+    const combobox = useComboboxContext();
+    const group = useComboboxGroupContext();
+    const _id = useId(id);
+    const optionRef = useRef(null);
+    const resolvedTextValue = getNodeTextValue(children, textValue) || value;
+    const isVisible = combobox.isOptionVisible(_id);
+    const isSelected = combobox.value === value;
+    const isActive = combobox.activeOptionId === _id;
+    const handleSelect = useCallback(() => {
+        if (disabled) {
+            return;
+        }
+        combobox.selectValue(value, resolvedTextValue);
+        onSelect?.(value);
+    }, [combobox, disabled, onSelect, resolvedTextValue, value]);
+    useEffect(() => {
+        return combobox.registerItem({
+            id: _id,
+            value,
+            ref: optionRef,
+            disabled: !!disabled,
+            label: resolvedTextValue,
+            textValue: resolvedTextValue,
+            groupId: group?.groupId,
+            select: handleSelect
+        });
+    }, [
+        _id,
+        combobox,
+        disabled,
+        group?.groupId,
+        handleSelect,
+        resolvedTextValue,
+        value
+    ]);
+    useEffect(() => {
+        if (!isActive || !isVisible) {
+            return;
+        }
+        if (typeof optionRef.current?.scrollIntoView === "function") {
+            optionRef.current.scrollIntoView({ block: "nearest" });
+        }
+    }, [isActive, isVisible]);
+    return (_jsxs("button", { ref: (node) => {
+            optionRef.current = node;
+            if (typeof ref === "function") {
+                ref(node);
+            }
+            else if (ref) {
+                ref.current = node;
+            }
+        }, id: _id, type: "button", role: "option", tabIndex: -1, disabled: disabled, hidden: !isVisible, "data-selected": isSelected, "data-active": isActive, "data-disabled": disabled, "aria-selected": isSelected, "aria-disabled": disabled, className: cx("w-full text-left p-1.5 text-xs rounded-none appearance-none border-none bg-transparent", "inline-flex items-center gap-2 outline-none transition-colors", "hover:bg-[var(--refraktor-bg-hover)]", "data-[active=true]:bg-[var(--refraktor-bg-hover)]", "data-[disabled=true]:opacity-50 data-[disabled=true]:pointer-events-none data-[disabled=true]:cursor-not-allowed", getRadius(combobox.radius), combobox.getStyles("option"), className), onMouseMove: (event) => {
+            onMouseMove?.(event);
+            if (!disabled) {
+                combobox.setActiveOptionId(_id);
+            }
+        }, onMouseDown: (event) => {
+            event.preventDefault();
+        }, onClick: (event) => {
+            onClick?.(event);
+            if (event.defaultPrevented) {
+                return;
+            }
+            handleSelect();
+        }, onKeyDown: (event) => {
+            onKeyDown?.(event);
+            if (event.defaultPrevented || disabled) {
+                return;
+            }
+            if (event.key === "Enter" || event.key === " ") {
+                event.preventDefault();
+                handleSelect();
+            }
+        }, ...props, children: [_jsx("span", { className: cx("flex-1", combobox.getStyles("optionLabel")), children: children }), isSelected && (_jsx("span", { className: cx("inline-flex items-center shrink-0 text-[var(--refraktor-primary)]", combobox.getStyles("optionCheck")), children: _jsx(CheckIcon, { size: 14 }) }))] }));
+});
+ComboboxOption.displayName = "@refraktor/core/Combobox.Option";
+export default ComboboxOption;

package/build/components/combobox/combobox-option/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ComboboxOption } from "./combobox-option";
+//# sourceMappingURL=index.d.ts.map

package/build/components/combobox/combobox-option/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/combobox/combobox-option/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,mBAAmB,CAAC"}

package/build/components/combobox/combobox-option/index.js

@@ -0,0 +1 @@
+export { default as ComboboxOption } from "./combobox-option";

package/build/components/combobox/combobox-root/combobox-root.d.ts

@@ -0,0 +1,4 @@
+import type { ComboboxRootFactoryPayload } from "../combobox.types";
+declare const ComboboxRoot: import("../../..").RefraktorComponent<ComboboxRootFactoryPayload>;
+export default ComboboxRoot;
+//# sourceMappingURL=combobox-root.d.ts.map

package/build/components/combobox/combobox-root/combobox-root.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-root.d.ts","sourceRoot":"","sources":["../../../../src/components/combobox/combobox-root/combobox-root.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAER,0BAA0B,EAE7B,MAAM,mBAAmB,CAAC;AA4D3B,QAAA,MAAM,YAAY,mEAgZhB,CAAC;AAIH,eAAe,YAAY,CAAC"}