@refraktor/core 0.0.1 → 0.0.3

package/build/components/modal/modal.test.js

@@ -39,6 +39,22 @@ describe("@refraktor/core/Modal", () => {
         await render(_jsxs(ModalRoot, { defaultOpened: true, transitionProps: transitionProps, children: [_jsx(ModalOverlay, {}), _jsx(ModalContent, { children: "Standalone composition" })] }));
         expect(await screen.findByRole("dialog")).toBeInTheDocument();
     });
+    it("applies custom overlay background opacity and blur", async () => {
+        await render(_jsxs(Modal, { defaultOpened: true, transitionProps: transitionProps, children: [_jsx(Modal.Overlay, { "data-testid": "overlay", backgroundOpacity: 0.4, blur: 6 }), _jsx(Modal.Content, { children: "Styled overlay" })] }));
+        const overlay = await screen.findByTestId("overlay");
+        expect(overlay).toHaveStyle({
+            backgroundColor: "rgba(0, 0, 0, 0.4)",
+            backdropFilter: "blur(6px)"
+        });
+    });
+    it("does not set backdrop blur for zero blur", async () => {
+        await render(_jsxs(Modal, { defaultOpened: true, transitionProps: transitionProps, children: [_jsx(Modal.Overlay, { "data-testid": "overlay", blur: 0 }), _jsx(Modal.Content, { children: "No blur" })] }));
+        const overlay = await screen.findByTestId("overlay");
+        expect(overlay).toHaveStyle({
+            backgroundColor: "rgba(0, 0, 0, 0.5)"
+        });
+        expect(overlay.style.backdropFilter).toBe("");
+    });
     it("locks and unlocks body scroll when enabled", async () => {
         const user = userEvent.setup();
         await render(_jsx(Modal, { defaultOpened: true, lockScroll: true, transitionProps: transitionProps, children: _jsxs(Modal.Content, { children: ["Scroll locked", _jsx(Modal.Close, {})] }) }));

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

@@ -44,6 +44,10 @@ export type ModalRootProps = ModalProps;
 export interface ModalOverlayProps extends ComponentPropsWithoutRef<"div"> {
     /** Whether clicking the overlay closes modal @default `true` */
     closeOnClick?: boolean;
+    /** Overlay background opacity @default `0.5` */
+    backgroundOpacity?: number;
+    /** Backdrop blur amount in px (or any CSS length) @default `0` */
+    blur?: number | string;
     /** Used for editing root class name */
     className?: string;
 }

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"number-input.d.ts","sourceRoot":"","sources":["../../../src/components/number-input/number-input.tsx"],"names":[],"mappings":"AASA,OAAO,EAEH,yBAAyB,EAE5B,MAAM,sBAAsB,CAAC;AAsD9B,QAAA,MAAM,WAAW,+DAuRf,CAAC;AAMH,eAAe,WAAW,CAAC"}
+{"version":3,"file":"number-input.d.ts","sourceRoot":"","sources":["../../../src/components/number-input/number-input.tsx"],"names":[],"mappings":"AASA,OAAO,EAEH,yBAAyB,EAE5B,MAAM,sBAAsB,CAAC;AAsD9B,QAAA,MAAM,WAAW,+DAmTf,CAAC;AAMH,eAAe,WAAW,CAAC"}

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

@@ -44,7 +44,7 @@ const defaultProps = {
 };
 const NumberInput = factory((_props, ref) => {
     const { cx } = useTheme();
-    const { id, value, defaultValue, size, onChange, min, max, step, precision, controlsPosition, disabled, className, classNames, ...props } = useProps("NumberInput", defaultProps, _props);
+    const { id, label, description, error, required, withAsterisk, value, defaultValue, size, onChange, min, max, step, precision, controlsPosition, disabled, className, classNames, ...props } = useProps("NumberInput", defaultProps, _props);
     const classes = useClassNames("NumberInput", classNames);
     const _id = useId(id);
     const [_value, setValue] = useUncontrolled({
@@ -84,9 +84,9 @@ const NumberInput = factory((_props, ref) => {
     };
     const stopHold = () => {
         if (holdTimer.current)
-            clearTimeout(holdTimer.current);
+            clearInterval(holdTimer.current);
         if (repeatTimer.current)
-            clearInterval(repeatTimer.current);
+            clearTimeout(repeatTimer.current);
         holdTimer.current = null;
         repeatTimer.current = null;
     };
@@ -173,18 +173,25 @@ const NumberInput = factory((_props, ref) => {
                         startHold("decrement");
                     }, onMouseUp: stopHold, onMouseLeave: stopHold, onTouchEnd: stopHold, children: _jsx(ChevronIcon, { direction: "down", size: controlSizing.iconSize, className: cx("block", !canDecrement && "opacity-50") }) })] }));
     }, [controlsPosition, canIncrement, canDecrement, classes, controlSizing]);
-    return (_jsx(InputWrapper, { children: _jsx(InputField, { ref: ref, type: "number", disabled: disabled, size: size, min: min, max: max, step: step, value: _value, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, onWheel: handleWheel, leftSection: controlsPosition === "left" ? controls : undefined, rightSection: controlsPosition === "right" ? controls : undefined, className: className, classNames: {
-                root: cx("px-0 gap-0 items-stretch overflow-hidden", controlsPosition === "none"
-                    ? "px-2"
-                    : controlsPosition === "left"
-                        ? "pr-2"
-                        : "pl-2", classes.root),
-                leftSection: cx("h-full self-stretch", controlsPosition === "left" &&
-                    controlSizing.leftSpacing, classes.leftSection),
-                rightSection: cx("h-full self-stretch", controlsPosition === "right" &&
-                    controlSizing.rightSpacing, classes.rightSection),
-                ...classes
-            }, "aria-disabled": disabled, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": Number(_value), ...props }) }));
+    const hasWrapper = label || description || error;
+    const field = (_jsx(InputField, { ref: ref, id: _id, type: "number", required: required, error: !!error, disabled: disabled, size: size, min: min, max: max, step: step, value: _value, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, onWheel: handleWheel, leftSection: controlsPosition === "left" ? controls : undefined, rightSection: controlsPosition === "right" ? controls : undefined, className: className, classNames: {
+            root: cx("px-0 gap-0 items-stretch overflow-hidden", controlsPosition === "none"
+                ? "px-2"
+                : controlsPosition === "left"
+                    ? "pr-2"
+                    : "pl-2", classes.root),
+            leftSection: cx("h-full self-stretch", controlsPosition === "left" && controlSizing.leftSpacing, classes.leftSection),
+            rightSection: cx("h-full self-stretch", controlsPosition === "right" && controlSizing.rightSpacing, classes.rightSection),
+            ...classes
+        }, "aria-describedby": error
+            ? `${_id}-error`
+            : description
+                ? `${_id}-description`
+                : undefined, "aria-disabled": disabled, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": Number(_value), ...props }));
+    if (!hasWrapper) {
+        return field;
+    }
+    return (_jsx(InputWrapper, { label: label, description: description, error: error, required: required, withAsterisk: withAsterisk, inputId: _id, children: field }));
 });
 NumberInput.displayName = "@refraktor/core/NumberInput";
 NumberInput.configure = createComponentConfig();

package/build/components/number-input/number-input.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=number-input.test.d.ts.map

package/build/components/number-input/number-input.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-input.test.d.ts","sourceRoot":"","sources":["../../../src/components/number-input/number-input.test.tsx"],"names":[],"mappings":""}

package/build/components/number-input/number-input.test.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, expect, it } from "vitest";
+import { render, screen } from "../../vitest";
+import NumberInput from "./number-input";
+describe("@refraktor/core/NumberInput", () => {
+    it("supports input wrapper props", async () => {
+        await render(_jsx(NumberInput, { label: "Quantity", description: "Enter desired amount", error: "Quantity is required" }));
+        const input = screen.getByLabelText("Quantity");
+        expect(input).toHaveAttribute("type", "number");
+        expect(input).toHaveAttribute("aria-invalid", "true");
+        expect(screen.getByText("Enter desired amount")).toBeInTheDocument();
+        expect(screen.getByText("Quantity is required")).toBeInTheDocument();
+    });
+});

package/build/components/number-input/number-input.types.d.ts

@@ -1,5 +1,5 @@
 import { createClassNamesConfig, createComponentConfig, FactoryPayload } from "../../utils";
-import { InputFieldClassNames, InputFieldProps } from "../input";
+import { InputFieldClassNames, InputProps } from "../input";
 export type NumberInputControlsPosition = "left" | "right" | "none";
 export interface NumberInputClassNames extends InputFieldClassNames {
     controls?: string;
@@ -27,7 +27,7 @@ export interface _NumberInputProps {
     /** Used for styling different parts of the component */
     classNames?: NumberInputClassNames;
 }
-export type NumberInputProps = _NumberInputProps & Omit<InputFieldProps, "onChange" | "type" | keyof _NumberInputProps>;
+export type NumberInputProps = _NumberInputProps & Omit<InputProps, "onChange" | "type" | keyof _NumberInputProps>;
 export interface NumberInputFactoryPayload extends FactoryPayload {
     props: NumberInputProps;
     ref: HTMLInputElement;

package/build/components/number-input/number-input.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"number-input.types.d.ts","sourceRoot":"","sources":["../../../src/components/number-input/number-input.types.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,sBAAsB,EACtB,qBAAqB,EACrB,cAAc,EACjB,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,oBAAoB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAEjE,MAAM,MAAM,2BAA2B,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;AAEpE,MAAM,WAAW,qBAAsB,SAAQ,oBAAoB;IAC/D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;CACrC;AAED,MAAM,WAAW,iBAAiB;IAC9B,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB,mCAAmC;IACnC,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE/B,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IAE5C,oBAAoB;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,oBAAoB;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,iBAAiB;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,gDAAgD;IAChD,gBAAgB,CAAC,EAAE,2BAA2B,CAAC;IAE/C,wDAAwD;IACxD,UAAU,CAAC,EAAE,qBAAqB,CAAC;CACtC;AAED,MAAM,MAAM,gBAAgB,GAAG,iBAAiB,GAC5C,IAAI,CAAC,eAAe,EAAE,UAAU,GAAG,MAAM,GAAG,MAAM,iBAAiB,CAAC,CAAC;AAEzE,MAAM,WAAW,yBAA0B,SAAQ,cAAc;IAC7D,KAAK,EAAE,gBAAgB,CAAC;IACxB,GAAG,EAAE,gBAAgB,CAAC;IACtB,QAAQ,EAAE;QACN,SAAS,EAAE,UAAU,CAAC,OAAO,qBAAqB,CAAC,gBAAgB,CAAC,CAAC,CAAC;QACtE,UAAU,EAAE,UAAU,CAClB,OAAO,sBAAsB,CAAC,qBAAqB,CAAC,CACvD,CAAC;KACL,CAAC;CACL"}
+{"version":3,"file":"number-input.types.d.ts","sourceRoot":"","sources":["../../../src/components/number-input/number-input.types.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,sBAAsB,EACtB,qBAAqB,EACrB,cAAc,EACjB,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,oBAAoB,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAE5D,MAAM,MAAM,2BAA2B,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;AAEpE,MAAM,WAAW,qBAAsB,SAAQ,oBAAoB;IAC/D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;CACrC;AAED,MAAM,WAAW,iBAAiB;IAC9B,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB,mCAAmC;IACnC,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE/B,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IAE5C,oBAAoB;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,oBAAoB;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,iBAAiB;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,gDAAgD;IAChD,gBAAgB,CAAC,EAAE,2BAA2B,CAAC;IAE/C,wDAAwD;IACxD,UAAU,CAAC,EAAE,qBAAqB,CAAC;CACtC;AAED,MAAM,MAAM,gBAAgB,GAAG,iBAAiB,GAC5C,IAAI,CAAC,UAAU,EAAE,UAAU,GAAG,MAAM,GAAG,MAAM,iBAAiB,CAAC,CAAC;AAEpE,MAAM,WAAW,yBAA0B,SAAQ,cAAc;IAC7D,KAAK,EAAE,gBAAgB,CAAC;IACxB,GAAG,EAAE,gBAAgB,CAAC;IACtB,QAAQ,EAAE;QACN,SAAS,EAAE,UAAU,CAAC,OAAO,qBAAqB,CAAC,gBAAgB,CAAC,CAAC,CAAC;QACtE,UAAU,EAAE,UAAU,CAClB,OAAO,sBAAsB,CAAC,qBAAqB,CAAC,CACvD,CAAC;KACL,CAAC;CACL"}

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

@@ -1 +1 @@
-{"version":3,"file":"popover-dropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/popover/popover-dropdown/popover-dropdown.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,6BAA6B,EAAE,MAAM,kBAAkB,CAAC;AASjE,QAAA,MAAM,eAAe,sEA4EpB,CAAC;AAIF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"popover-dropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/popover/popover-dropdown/popover-dropdown.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,6BAA6B,EAAE,MAAM,kBAAkB,CAAC;AASjE,QAAA,MAAM,eAAe,sEA8EpB,CAAC;AAIF,eAAe,eAAe,CAAC"}

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

@@ -7,7 +7,7 @@ import { FloatingArrow, FloatingFocusManager, FloatingPortal } from "@floating-u
 const PopoverDropdown = factory(({ children, className, style, ...props }, ref) => {
     const { cx, getRadius } = useTheme();
     const { popover, showArrow, radius, withinPortal, transitionProps, getStyles } = usePopoverContext();
-    const dropdownContent = (_jsx(Transition, { transition: "fade", duration: 200, mounted: popover.opened, ...transitionProps, children: _jsxs("div", { ref: (node) => {
+    const dropdownContent = (_jsx(Transition, { transition: "fade", duration: 200, mounted: popover.opened, style: { position: "relative", zIndex: 1000 }, ...transitionProps, children: _jsxs("div", { ref: (node) => {
                 popover.refs.setFloating(node);
                 if (typeof ref === "function") {
                     ref(node);
@@ -17,6 +17,7 @@ const PopoverDropdown = factory(({ children, className, style, ...props }, ref)
                 }
             }, role: "dialog", "aria-modal": "true", style: {
                 ...popover.floatingStyles,
+                zIndex: 1000,
                 ...style
             }, className: cx("z-50 p-2 bg-[var(--refraktor-bg)] text-[var(--refraktor-text)] shadow-md text-sm border-0", getRadius(radius), getStyles("dropdown"), className), ...popover.getFloatingProps(), ...props, children: [children, showArrow && (_jsx(FloatingArrow, { ref: popover.arrowRef, context: popover.context, width: 10, height: 5, className: cx("fill-[var(--refraktor-bg)]", getStyles("arrow")) }))] }) }));
     const wrappedContent = popover.opened ? (_jsx(FloatingFocusManager, { context: popover.context, modal: false, children: dropdownContent })) : (dropdownContent);

package/build/components/popover/use-popover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-popover.d.ts","sourceRoot":"","sources":["../../../src/components/popover/use-popover.ts"],"names":[],"mappings":"AACA,OAAO,EACH,kBAAkB,EAClB,kBAAkB,EAClB,cAAc,EACjB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAIH,eAAe,EAIf,SAAS,EAUZ,MAAM,oBAAoB,CAAC;AAG5B,UAAU,eAAe;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,gBAAgB;IAC7B,MAAM,EAAE,OAAO,CAAC;IAChB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,OAAO,EAAE,eAAe,CAAC;IACzB,IAAI,EAAE;QACF,YAAY,EAAE,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;QACjD,WAAW,EAAE,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;QAChD,SAAS,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;QACtD,QAAQ,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;KACxD,CAAC;IACF,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC;IACpC,iBAAiB,EAAE,CACf,SAAS,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,KAC5C,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC7B,gBAAgB,EAAE,CACd,SAAS,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,KAC5C,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,aAAa,GAAG,IAAI,CAAC,CAAC;IAChD,SAAS,EAAE,SAAS,CAAC;CACxB;AAED,wBAAgB,UAAU,CAAC,OAAO,GAAE,eAAoB,GAAG,gBAAgB,CAwJ1E"}
+{"version":3,"file":"use-popover.d.ts","sourceRoot":"","sources":["../../../src/components/popover/use-popover.ts"],"names":[],"mappings":"AACA,OAAO,EACH,kBAAkB,EAClB,kBAAkB,EAClB,cAAc,EACjB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAIH,eAAe,EAIf,SAAS,EAUZ,MAAM,oBAAoB,CAAC;AAG5B,UAAU,eAAe;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,gBAAgB;IAC7B,MAAM,EAAE,OAAO,CAAC;IAChB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,OAAO,EAAE,eAAe,CAAC;IACzB,IAAI,EAAE;QACF,YAAY,EAAE,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;QACjD,WAAW,EAAE,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;QAChD,SAAS,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;QACtD,QAAQ,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;KACxD,CAAC;IACF,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC;IACpC,iBAAiB,EAAE,CACf,SAAS,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,KAC5C,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC7B,gBAAgB,EAAE,CACd,SAAS,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,KAC5C,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,aAAa,GAAG,IAAI,CAAC,CAAC;IAChD,SAAS,EAAE,SAAS,CAAC;CACxB;AAED,wBAAgB,UAAU,CAAC,OAAO,GAAE,eAAoB,GAAG,gBAAgB,CAyJ1E"}

package/build/components/popover/use-popover.js

@@ -43,7 +43,8 @@ export function usePopover(options = {}) {
         open: isOpen,
         onOpenChange: setIsOpen,
         middleware: middleware,
-        whileElementsMounted: autoUpdate
+        whileElementsMounted: autoUpdate,
+        strategy: "fixed"
     });
     const click = useClick(floating.context, {
         enabled: trigger === "click" && !disabled

package/build/components/portal/portal.js

@@ -71,6 +71,6 @@ const Portal = factory((_props, ref) => {
     }
     return createPortal(_jsx(_Fragment, { children: children }), nodeRef.current);
 });
-Portal.displayName = "@velra/core/Portal";
+Portal.displayName = "@refraktor/core/Portal";
 Portal.configure = createComponentConfig();
 export default Portal;

package/build/components/segmented-control/index.d.ts

@@ -0,0 +1,3 @@
+export { default as SegmentedControl } from "./segmented-control";
+export type { SegmentedControlProps, SegmentedControlClassNames, SegmentedControlItem } from "./segmented-control.types";
+//# sourceMappingURL=index.d.ts.map

package/build/components/segmented-control/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/segmented-control/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAClE,YAAY,EACR,qBAAqB,EACrB,0BAA0B,EAC1B,oBAAoB,EACvB,MAAM,2BAA2B,CAAC"}

package/build/components/segmented-control/index.js

@@ -0,0 +1 @@
+export { default as SegmentedControl } from "./segmented-control";

package/build/components/segmented-control/segmented-control.d.ts

@@ -0,0 +1,4 @@
+import { SegmentedControlFactoryPayload } from "./segmented-control.types";
+declare const SegmentedControl: import("../..").RefraktorComponent<SegmentedControlFactoryPayload>;
+export default SegmentedControl;
+//# sourceMappingURL=segmented-control.d.ts.map

package/build/components/segmented-control/segmented-control.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmented-control.d.ts","sourceRoot":"","sources":["../../../src/components/segmented-control/segmented-control.tsx"],"names":[],"mappings":"AAWA,OAAO,EAEH,8BAA8B,EAEjC,MAAM,2BAA2B,CAAC;AASnC,QAAA,MAAM,gBAAgB,oEAqNrB,CAAC;AAOF,eAAe,gBAAgB,CAAC"}

package/build/components/segmented-control/segmented-control.js

@@ -0,0 +1,113 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useUncontrolled } from "@refraktor/utils";
+import { useMemo, useRef } from "react";
+import { useTheme } from "../../theme";
+import { createClassNamesConfig, createComponentConfig, factory, useClassNames, useProps } from "../../utils";
+import { getSize } from "./segmented-control.styles";
+const defaultProps = {
+    size: "md",
+    radius: "default",
+    fullWidth: false,
+    disabled: false
+};
+const SegmentedControl = factory((_props, ref) => {
+    const { cx, getRadius } = useTheme();
+    const { id, data, value, defaultValue, onChange, size, radius, fullWidth, disabled, name, className, classNames, ...props } = useProps("SegmentedControl", defaultProps, _props);
+    const classes = useClassNames("SegmentedControl", classNames);
+    const _id = useId(id);
+    const firstEnabledValue = useMemo(() => data.find((item) => !item.disabled)?.value ?? "", [data]);
+    const [selectedValue, setSelectedValue] = useUncontrolled({
+        value,
+        defaultValue,
+        finalValue: firstEnabledValue,
+        onChange
+    });
+    const sizeStyles = getSize(size);
+    const controlRefs = useRef([]);
+    const enabledIndexes = useMemo(() => {
+        const indexes = [];
+        data.forEach((item, index) => {
+            if (!item.disabled) {
+                indexes.push(index);
+            }
+        });
+        return indexes;
+    }, [data]);
+    const activeIndex = useMemo(() => data.findIndex((item) => item.value === selectedValue), [data, selectedValue]);
+    const tabStopIndex = useMemo(() => {
+        if (activeIndex !== -1 && !data[activeIndex]?.disabled) {
+            return activeIndex;
+        }
+        return enabledIndexes[0] ?? -1;
+    }, [activeIndex, data, enabledIndexes]);
+    const selectByIndex = (index) => {
+        const item = data[index];
+        if (!item ||
+            disabled ||
+            item.disabled ||
+            item.value === selectedValue) {
+            return;
+        }
+        setSelectedValue(item.value);
+    };
+    const moveSelection = (currentIndex, direction) => {
+        if (disabled || enabledIndexes.length === 0) {
+            return;
+        }
+        const currentEnabledPosition = enabledIndexes.indexOf(currentIndex);
+        const basePosition = currentEnabledPosition === -1 ? 0 : currentEnabledPosition;
+        const nextPosition = (basePosition + direction + enabledIndexes.length) %
+            enabledIndexes.length;
+        const nextIndex = enabledIndexes[nextPosition];
+        selectByIndex(nextIndex);
+        controlRefs.current[nextIndex]?.focus();
+    };
+    const handleKeyDown = (event, index, isControlDisabled) => {
+        if (event.defaultPrevented || disabled || isControlDisabled) {
+            return;
+        }
+        if (event.key === "ArrowRight" || event.key === "ArrowDown") {
+            event.preventDefault();
+            moveSelection(index, 1);
+            return;
+        }
+        if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
+            event.preventDefault();
+            moveSelection(index, -1);
+            return;
+        }
+        if (event.key === "Home") {
+            event.preventDefault();
+            const firstEnabledIndex = enabledIndexes[0];
+            if (firstEnabledIndex !== undefined) {
+                selectByIndex(firstEnabledIndex);
+                controlRefs.current[firstEnabledIndex]?.focus();
+            }
+            return;
+        }
+        if (event.key === "End") {
+            event.preventDefault();
+            const lastEnabledIndex = enabledIndexes[enabledIndexes.length - 1];
+            if (lastEnabledIndex !== undefined) {
+                selectByIndex(lastEnabledIndex);
+                controlRefs.current[lastEnabledIndex]?.focus();
+            }
+        }
+    };
+    return (_jsxs("div", { ref: ref, id: _id, role: "radiogroup", "data-disabled": disabled, "aria-disabled": disabled, className: cx("relative inline-flex items-stretch border border-[var(--refraktor-border)]", "bg-[var(--refraktor-bg-subtle)]", "data-[disabled=true]:opacity-50", fullWidth && "w-full", sizeStyles.root, getRadius(radius), classes.root, className), ...props, children: [data.map((item, index) => {
+                const isActive = item.value === selectedValue;
+                const isControlDisabled = !!(disabled || item.disabled);
+                return (_jsx("button", { ref: (node) => {
+                        controlRefs.current[index] = node;
+                    }, type: "button", role: "radio", id: `${_id}-control-${index}`, "aria-checked": isActive, "aria-disabled": isControlDisabled, "data-active": isActive, "data-disabled": isControlDisabled, disabled: isControlDisabled, tabIndex: isControlDisabled || tabStopIndex !== index
+                        ? -1
+                        : 0, className: cx("relative inline-flex items-center justify-center whitespace-nowrap select-none outline-none transition-colors", "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--refraktor-primary)]", "data-[disabled=true]:opacity-50 data-[disabled=true]:pointer-events-none data-[disabled=true]:cursor-not-allowed", fullWidth && "flex-1", sizeStyles.control, sizeStyles.label, getRadius(radius), isActive
+                        ? "bg-[var(--refraktor-primary)] text-[var(--refraktor-primary-text)]"
+                        : "text-[var(--refraktor-text-secondary)] hover:bg-[var(--refraktor-bg-hover)] hover:text-[var(--refraktor-text)]", classes.control), onClick: () => selectByIndex(index), onKeyDown: (event) => handleKeyDown(event, index, isControlDisabled), children: _jsx("span", { className: cx("leading-none", classes.label), children: item.label }) }, item.value));
+            }), name && (_jsx("input", { type: "hidden", name: name, value: selectedValue }))] }));
+});
+SegmentedControl.displayName = "@refraktor/core/SegmentedControl";
+SegmentedControl.configure = createComponentConfig();
+SegmentedControl.classNames =
+    createClassNamesConfig();
+export default SegmentedControl;

package/build/components/segmented-control/segmented-control.styles.d.ts

@@ -0,0 +1,9 @@
+import { RefraktorSize } from "../../theme";
+type SegmentedControlSizeStyles = {
+    root: string;
+    control: string;
+    label: string;
+};
+export declare const getSize: (size?: RefraktorSize) => SegmentedControlSizeStyles;
+export {};
+//# sourceMappingURL=segmented-control.styles.d.ts.map

package/build/components/segmented-control/segmented-control.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmented-control.styles.d.ts","sourceRoot":"","sources":["../../../src/components/segmented-control/segmented-control.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,KAAK,0BAA0B,GAAG;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;CACjB,CAAC;AA8BF,eAAO,MAAM,OAAO,GAAI,OAAM,aAAoB,+BAAgB,CAAC"}

package/build/components/segmented-control/segmented-control.styles.js

@@ -0,0 +1,28 @@
+const sizes = {
+    xs: {
+        root: "p-0.5 gap-0.5",
+        control: "h-6 px-2 min-w-7",
+        label: "text-[10px]"
+    },
+    sm: {
+        root: "p-0.5 gap-0.5",
+        control: "h-7 px-2.5 min-w-8",
+        label: "text-xs"
+    },
+    md: {
+        root: "p-1 gap-1",
+        control: "h-8 px-3 min-w-9",
+        label: "text-sm"
+    },
+    lg: {
+        root: "p-1 gap-1",
+        control: "h-9 px-3.5 min-w-10",
+        label: "text-base"
+    },
+    xl: {
+        root: "p-1.5 gap-1.5",
+        control: "h-10 px-4 min-w-11",
+        label: "text-lg"
+    }
+};
+export const getSize = (size = "md") => sizes[size];

package/build/components/segmented-control/segmented-control.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=segmented-control.test.d.ts.map

package/build/components/segmented-control/segmented-control.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmented-control.test.d.ts","sourceRoot":"","sources":["../../../src/components/segmented-control/segmented-control.test.tsx"],"names":[],"mappings":""}

package/build/components/segmented-control/segmented-control.test.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createRef, useState } from "react";
+import { describe, expect, it, vi } from "vitest";
+import { render, screen, userEvent } from "../../vitest";
+import SegmentedControl from "./segmented-control";
+const data = [
+    { value: "react", label: "React" },
+    { value: "vue", label: "Vue" },
+    { value: "svelte", label: "Svelte" }
+];
+describe("@refraktor/core/SegmentedControl", () => {
+    it("renders options and selected value", async () => {
+        await render(_jsx(SegmentedControl, { data: data, defaultValue: "react" }));
+        expect(screen.getByRole("radiogroup")).toBeInTheDocument();
+        expect(screen.getByRole("radio", { name: "React" })).toHaveAttribute("aria-checked", "true");
+        expect(screen.getByRole("radio", { name: "Vue" })).toHaveAttribute("aria-checked", "false");
+    });
+    it("forwards ref correctly", async () => {
+        const ref = createRef();
+        await render(_jsx(SegmentedControl, { ref: ref, data: data }));
+        expect(ref.current).toBeInstanceOf(HTMLDivElement);
+        expect(ref.current?.tagName).toBe("DIV");
+    });
+    it("handles click change events", async () => {
+        const user = userEvent.setup();
+        const onChange = vi.fn();
+        await render(_jsx(SegmentedControl, { data: data, defaultValue: "react", onChange: onChange }));
+        await user.click(screen.getByRole("radio", { name: "Vue" }));
+        expect(onChange).toHaveBeenCalledWith("vue");
+        expect(screen.getByRole("radio", { name: "Vue" })).toHaveAttribute("aria-checked", "true");
+    });
+    it("supports controlled mode", async () => {
+        const user = userEvent.setup();
+        function Demo() {
+            const [value, setValue] = useState("react");
+            return (_jsx(SegmentedControl, { data: data, value: value, onChange: setValue }));
+        }
+        await render(_jsx(Demo, {}));
+        await user.click(screen.getByRole("radio", { name: "Svelte" }));
+        expect(screen.getByRole("radio", { name: "Svelte" })).toHaveAttribute("aria-checked", "true");
+    });
+    it("does not select disabled item", async () => {
+        const user = userEvent.setup();
+        const onChange = vi.fn();
+        await render(_jsx(SegmentedControl, { defaultValue: "react", onChange: onChange, data: [
+                { value: "react", label: "React" },
+                { value: "vue", label: "Vue", disabled: true }
+            ] }));
+        const disabledControl = screen.getByRole("radio", { name: "Vue" });
+        expect(disabledControl).toBeDisabled();
+        await user.click(disabledControl);
+        expect(onChange).not.toHaveBeenCalled();
+        expect(disabledControl).toHaveAttribute("aria-checked", "false");
+    });
+    it("supports keyboard navigation and skips disabled items", async () => {
+        const user = userEvent.setup();
+        await render(_jsx(SegmentedControl, { defaultValue: "react", data: [
+                { value: "react", label: "React" },
+                { value: "vue", label: "Vue", disabled: true },
+                { value: "svelte", label: "Svelte" }
+            ] }));
+        const reactControl = screen.getByRole("radio", { name: "React" });
+        reactControl.focus();
+        await user.keyboard("{ArrowRight}");
+        const svelteControl = screen.getByRole("radio", { name: "Svelte" });
+        expect(svelteControl).toHaveFocus();
+        expect(svelteControl).toHaveAttribute("aria-checked", "true");
+    });
+    it("supports root and slot class names", async () => {
+        const { container } = await render(_jsx(SegmentedControl, { data: data, className: "custom-root", classNames: {
+                control: "custom-control",
+                label: "custom-label"
+            } }));
+        const root = container.firstElementChild;
+        const control = screen.getByRole("radio", { name: "React" });
+        const label = screen.getByText("React");
+        expect(root).toHaveClass("custom-root");
+        expect(control).toHaveClass("custom-control");
+        expect(label).toHaveClass("custom-label");
+    });
+});

package/build/components/segmented-control/segmented-control.types.d.ts

@@ -0,0 +1,49 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { RefraktorRadius, RefraktorSize } from "../../theme";
+import { createClassNamesConfig, createComponentConfig, FactoryPayload } from "../../utils";
+export interface SegmentedControlItem {
+    /** Item value */
+    value: string;
+    /** Item label */
+    label: ReactNode;
+    /** Whether item is disabled */
+    disabled?: boolean;
+}
+export type SegmentedControlClassNames = {
+    root?: string;
+    control?: string;
+    label?: string;
+};
+export interface SegmentedControlProps extends Omit<ComponentPropsWithoutRef<"div">, "onChange"> {
+    /** Items to render */
+    data: SegmentedControlItem[];
+    /** Selected value (controlled) */
+    value?: string;
+    /** Initial selected value (uncontrolled) */
+    defaultValue?: string;
+    /** Callback called when selected value changes */
+    onChange?: (value: string) => void;
+    /** The size of segmented control @default `md` */
+    size?: RefraktorSize;
+    /** The radius of segmented control @default `default` */
+    radius?: RefraktorRadius;
+    /** Whether segmented control should take full width @default `false` */
+    fullWidth?: boolean;
+    /** Whether segmented control is disabled @default `false` */
+    disabled?: boolean;
+    /** Hidden input name for forms */
+    name?: string;
+    /** Used for editing root class name */
+    className?: string;
+    /** Used for styling different parts of the component */
+    classNames?: SegmentedControlClassNames;
+}
+export interface SegmentedControlFactoryPayload extends FactoryPayload {
+    props: SegmentedControlProps;
+    ref: HTMLDivElement;
+    compound: {
+        configure: ReturnType<typeof createComponentConfig<SegmentedControlProps>>;
+        classNames: ReturnType<typeof createClassNamesConfig<SegmentedControlClassNames>>;
+    };
+}
+//# sourceMappingURL=segmented-control.types.d.ts.map

package/build/components/segmented-control/segmented-control.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmented-control.types.d.ts","sourceRoot":"","sources":["../../../src/components/segmented-control/segmented-control.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EACH,sBAAsB,EACtB,qBAAqB,EACrB,cAAc,EACjB,MAAM,aAAa,CAAC;AAErB,MAAM,WAAW,oBAAoB;IACjC,iBAAiB;IACjB,KAAK,EAAE,MAAM,CAAC;IAEd,iBAAiB;IACjB,KAAK,EAAE,SAAS,CAAC;IAEjB,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,MAAM,0BAA0B,GAAG;IACrC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAC/C,wBAAwB,CAAC,KAAK,CAAC,EAC/B,UAAU,CACb;IACG,sBAAsB;IACtB,IAAI,EAAE,oBAAoB,EAAE,CAAC;IAE7B,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,4CAA4C;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEnC,kDAAkD;IAClD,IAAI,CAAC,EAAE,aAAa,CAAC;IAErB,yDAAyD;IACzD,MAAM,CAAC,EAAE,eAAe,CAAC;IAEzB,wEAAwE;IACxE,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,kCAAkC;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,wDAAwD;IACxD,UAAU,CAAC,EAAE,0BAA0B,CAAC;CAC3C;AAED,MAAM,WAAW,8BAA+B,SAAQ,cAAc;IAClE,KAAK,EAAE,qBAAqB,CAAC;IAC7B,GAAG,EAAE,cAAc,CAAC;IACpB,QAAQ,EAAE;QACN,SAAS,EAAE,UAAU,CACjB,OAAO,qBAAqB,CAAC,qBAAqB,CAAC,CACtD,CAAC;QACF,UAAU,EAAE,UAAU,CAClB,OAAO,sBAAsB,CAAC,0BAA0B,CAAC,CAC5D,CAAC;KACL,CAAC;CACL"}

package/build/components/segmented-control/segmented-control.types.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"select-dropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/select/select-dropdown/select-dropdown.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,iBAAiB,CAAC;AAOpE,QAAA,MAAM,cAAc,qEAmRnB,CAAC;AAIF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"select-dropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/select/select-dropdown/select-dropdown.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,iBAAiB,CAAC;AAOpE,QAAA,MAAM,cAAc,qEAoRnB,CAAC;AAIF,eAAe,cAAc,CAAC"}

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

@@ -142,8 +142,9 @@ const SelectDropdown = factory(({ children, className, style, onKeyDown, ...prop
         }
     };
     const referenceWidth = select.select.refs.reference.current?.offsetWidth;
-    const dropdownContent = (_jsx(Transition, { transition: "fade", duration: 150, mounted: select.select.opened, ...select.transitionProps, children: _jsxs("div", { ref: useMergeRefs([ref, select.select.refs.setFloating]), id: select.listId, role: "listbox", "aria-labelledby": select.triggerId, tabIndex: -1, style: {
+    const dropdownContent = (_jsx(Transition, { transition: "fade", duration: 150, mounted: select.select.opened, style: { position: "relative", zIndex: 1000 }, ...select.transitionProps, children: _jsxs("div", { ref: useMergeRefs([ref, select.select.refs.setFloating]), id: select.listId, role: "listbox", "aria-labelledby": select.triggerId, tabIndex: -1, style: {
                 ...select.select.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(select.radius), select.getStyles("dropdown"), className), ...select.select.getFloatingProps({
@@ -153,7 +154,7 @@ const SelectDropdown = factory(({ children, className, style, onKeyDown, ...prop
                         }, value: select.search, onChange: (event) => {
                             select.setSearch(event.currentTarget.value);
                         }, size: select.size, radius: select.radius, variant: select.variant, placeholder: select.searchPlaceholder, autoComplete: "off", className: select.getStyles("searchInput") }) })), _jsxs("div", { className: cx("max-h-80 overflow-y-auto refraktor-scrollbar p-1", select.getStyles("options")), children: [children, !select.hasVisibleItems() && (_jsx("div", { className: cx("px-1.5 py-1.5 text-sm text-[var(--refraktor-text-secondary)]", select.getStyles("empty")), children: select.nothingFound }))] })] }) }));
-    const wrappedContent = select.select.opened ? (_jsx(FloatingFocusManager, { context: select.select.context, modal: false, initialFocus: -1, children: dropdownContent })) : (dropdownContent);
+    const wrappedContent = (_jsx(FloatingFocusManager, { context: select.select.context, modal: false, initialFocus: -1, disabled: !select.select.opened, children: dropdownContent }));
     return select.withinPortal ? (_jsx(FloatingPortal, { children: wrappedContent })) : (wrappedContent);
 });
 SelectDropdown.displayName = "@refraktor/core/Select.Dropdown";

package/build/components/select/select-item/select-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select-item.d.ts","sourceRoot":"","sources":["../../../../src/components/select/select-item/select-item.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,iBAAiB,CAAC;AAEhE,QAAA,MAAM,UAAU,iEA4If,CAAC;AAIF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"select-item.d.ts","sourceRoot":"","sources":["../../../../src/components/select/select-item/select-item.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,iBAAiB,CAAC;AAEhE,QAAA,MAAM,UAAU,iEA2If,CAAC;AAIF,eAAe,UAAU,CAAC"}

package/build/components/select/select-item/select-item.js

@@ -49,7 +49,7 @@ const SelectItem = factory(({ id, value, children, disabled, textValue, classNam
             else if (ref) {
                 ref.current = node;
             }
-        }, id: _id, type: "button", role: "option", tabIndex: -1, disabled: disabled, hidden: !isVisible, "data-selected": isSelected, "data-disabled": disabled, "aria-selected": isSelected, "aria-disabled": disabled, className: cx("w-full text-left p-1.5 text-sm rounded-none appearance-none border-none bg-transparent", "inline-flex items-center gap-2 outline-none transition-colors", "hover:bg-[var(--refraktor-bg-hover)] focus-visible:bg-[var(--refraktor-bg-hover)]", "data-[selected=true]:bg-[var(--refraktor-bg-hover)]", "data-[disabled=true]:opacity-50 data-[disabled=true]:pointer-events-none data-[disabled=true]:cursor-not-allowed", getRadius(select.radius), select.getStyles("item"), className), onMouseMove: (event) => {
+        }, id: _id, type: "button", role: "option", tabIndex: -1, disabled: disabled, hidden: !isVisible, "data-selected": isSelected, "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)] focus-visible:bg-[var(--refraktor-bg-hover)]", "data-[disabled=true]:opacity-50 data-[disabled=true]:pointer-events-none data-[disabled=true]:cursor-not-allowed", getRadius(select.radius), select.getStyles("item"), className), onMouseMove: (event) => {
             onMouseMove?.(event);
             if (!disabled &&
                 document.activeElement !== event.currentTarget) {

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

@@ -1 +1 @@
-{"version":3,"file":"select-root.d.ts","sourceRoot":"","sources":["../../../../src/components/select/select-root/select-root.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAER,wBAAwB,EAE3B,MAAM,iBAAiB,CAAC;AAqBzB,QAAA,MAAM,UAAU,iEAqNd,CAAC;AAIH,eAAe,UAAU,CAAC"}
+{"version":3,"file":"select-root.d.ts","sourceRoot":"","sources":["../../../../src/components/select/select-root/select-root.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAER,wBAAwB,EAE3B,MAAM,iBAAiB,CAAC;AA0DzB,QAAA,MAAM,UAAU,iEAmPd,CAAC;AAIH,eAAe,UAAU,CAAC"}