@refraktor/core 0.0.3 → 0.0.5

package/build/components/scroll-area/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/scroll-area/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,eAAe,CAAC;AACtD,YAAY,EACR,eAAe,EACf,oBAAoB,EACpB,qBAAqB,EACxB,MAAM,qBAAqB,CAAC"}

package/build/components/scroll-area/index.js

@@ -0,0 +1 @@
+export { default as ScrollArea } from "./scroll-area";

package/build/components/scroll-area/scroll-area.d.ts

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

package/build/components/scroll-area/scroll-area.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-area.d.ts","sourceRoot":"","sources":["../../../src/components/scroll-area/scroll-area.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAER,wBAAwB,EAG3B,MAAM,qBAAqB,CAAC;AAoB7B,QAAA,MAAM,UAAU,8DA8Bd,CAAC;AAMH,eAAe,UAAU,CAAC"}

package/build/components/scroll-area/scroll-area.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createClassNamesConfig, createComponentConfig, factory, useClassNames, useProps } from "../../utils";
+import { useTheme } from "../../theme";
+const defaultProps = {
+    orientation: "vertical",
+    scrollbarSize: 6
+};
+function getOrientationStyles(orientation) {
+    if (orientation === "horizontal") {
+        return "overflow-x-auto overflow-y-hidden";
+    }
+    if (orientation === "both") {
+        return "overflow-auto";
+    }
+    return "overflow-y-auto overflow-x-hidden";
+}
+const ScrollArea = factory((_props, ref) => {
+    const { cx } = useTheme();
+    const { orientation, scrollbarSize, className, classNames, style, ...props } = useProps("ScrollArea", defaultProps, _props);
+    const classes = useClassNames("ScrollArea", classNames);
+    const resolvedStyle = {
+        ...(style ?? {}),
+        "--refraktor-scrollbar-size": `${scrollbarSize}px`
+    };
+    return (_jsx("div", { ref: ref, className: cx("refraktor-scrollbar", getOrientationStyles(orientation), classes.root, className), style: resolvedStyle, ...props }));
+});
+ScrollArea.displayName = "@refraktor/core/ScrollArea";
+ScrollArea.configure = createComponentConfig();
+ScrollArea.classNames = createClassNamesConfig();
+export default ScrollArea;

package/build/components/scroll-area/scroll-area.test.d.ts

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

package/build/components/scroll-area/scroll-area.test.d.ts.map

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

package/build/components/scroll-area/scroll-area.test.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createRef } from "react";
+import { describe, expect, it } from "vitest";
+import { render, screen } from "../../vitest";
+import ScrollArea from "./scroll-area";
+describe("@refraktor/core/ScrollArea", () => {
+    it("renders children with default vertical scroll behavior", async () => {
+        await render(_jsx(ScrollArea, { "data-testid": "scroll-area", children: _jsx("div", { children: "Content" }) }));
+        const scrollArea = screen.getByTestId("scroll-area");
+        expect(scrollArea).toHaveClass("refraktor-scrollbar");
+        expect(scrollArea).toHaveClass("overflow-y-auto");
+        expect(scrollArea).toHaveClass("overflow-x-hidden");
+        expect(scrollArea).toHaveTextContent("Content");
+    });
+    it("supports horizontal and bidirectional orientation", async () => {
+        const { rerender } = await render(_jsx(ScrollArea, { "data-testid": "scroll-area", orientation: "horizontal" }));
+        expect(screen.getByTestId("scroll-area")).toHaveClass("overflow-x-auto");
+        expect(screen.getByTestId("scroll-area")).toHaveClass("overflow-y-hidden");
+        rerender(_jsx(ScrollArea, { "data-testid": "scroll-area", orientation: "both" }));
+        expect(screen.getByTestId("scroll-area")).toHaveClass("overflow-auto");
+    });
+    it("applies scrollbar size css variable", async () => {
+        await render(_jsx(ScrollArea, { "data-testid": "scroll-area", scrollbarSize: 10 }));
+        const scrollArea = screen.getByTestId("scroll-area");
+        expect(scrollArea.style.getPropertyValue("--refraktor-scrollbar-size")).toBe("10px");
+    });
+    it("supports root and slot class names", async () => {
+        await render(_jsx(ScrollArea, { "data-testid": "scroll-area", className: "custom-root", classNames: { root: "slot-root" } }));
+        const scrollArea = screen.getByTestId("scroll-area");
+        expect(scrollArea).toHaveClass("custom-root");
+        expect(scrollArea).toHaveClass("slot-root");
+    });
+    it("forwards ref to root element", async () => {
+        const ref = createRef();
+        await render(_jsx(ScrollArea, { ref: ref }));
+        expect(ref.current).toBeInstanceOf(HTMLDivElement);
+        expect(ref.current?.tagName).toBe("DIV");
+    });
+});

package/build/components/scroll-area/scroll-area.types.d.ts

@@ -0,0 +1,25 @@
+import { ComponentPropsWithoutRef } from "react";
+import { createClassNamesConfig, createComponentConfig, FactoryPayload } from "../../utils";
+export type ScrollAreaOrientation = "vertical" | "horizontal" | "both";
+export type ScrollAreaClassNames = {
+    root?: string;
+};
+export interface ScrollAreaProps extends ComponentPropsWithoutRef<"div"> {
+    /** Scroll direction behavior @default `vertical` */
+    orientation?: ScrollAreaOrientation;
+    /** Scrollbar thickness in pixels @default `6` */
+    scrollbarSize?: number;
+    /** Used for editing root class name */
+    className?: string;
+    /** Used for styling different parts of the component */
+    classNames?: ScrollAreaClassNames;
+}
+export interface ScrollAreaFactoryPayload extends FactoryPayload {
+    props: ScrollAreaProps;
+    ref: HTMLDivElement;
+    compound: {
+        configure: ReturnType<typeof createComponentConfig<ScrollAreaProps>>;
+        classNames: ReturnType<typeof createClassNamesConfig<ScrollAreaClassNames>>;
+    };
+}
+//# sourceMappingURL=scroll-area.types.d.ts.map

package/build/components/scroll-area/scroll-area.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-area.types.d.ts","sourceRoot":"","sources":["../../../src/components/scroll-area/scroll-area.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EACH,sBAAsB,EACtB,qBAAqB,EACrB,cAAc,EACjB,MAAM,aAAa,CAAC;AAErB,MAAM,MAAM,qBAAqB,GAAG,UAAU,GAAG,YAAY,GAAG,MAAM,CAAC;AAEvE,MAAM,MAAM,oBAAoB,GAAG;IAC/B,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,WAAW,eAAgB,SAAQ,wBAAwB,CAAC,KAAK,CAAC;IACpE,oDAAoD;IACpD,WAAW,CAAC,EAAE,qBAAqB,CAAC;IAEpC,iDAAiD;IACjD,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,wDAAwD;IACxD,UAAU,CAAC,EAAE,oBAAoB,CAAC;CACrC;AAED,MAAM,WAAW,wBAAyB,SAAQ,cAAc;IAC5D,KAAK,EAAE,eAAe,CAAC;IACvB,GAAG,EAAE,cAAc,CAAC;IACpB,QAAQ,EAAE;QACN,SAAS,EAAE,UAAU,CAAC,OAAO,qBAAqB,CAAC,eAAe,CAAC,CAAC,CAAC;QACrE,UAAU,EAAE,UAAU,CAClB,OAAO,sBAAsB,CAAC,oBAAoB,CAAC,CACtD,CAAC;KACL,CAAC;CACL"}

package/build/components/scroll-area/scroll-area.types.js

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

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

@@ -1 +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"}
+{"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,oEA+NrB,CAAC;AAOF,eAAe,gBAAgB,CAAC"}

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

@@ -97,13 +97,13 @@ const SegmentedControl = factory((_props, ref) => {
     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) => {
+                return (_jsxs("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
+                        : 0, className: cx("relative inline-flex items-center justify-center whitespace-nowrap select-none outline-none transition-colors cursor-pointer", "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", item.icon && "gap-1.5", 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));
+                        : "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: [item.icon && (_jsx("span", { "aria-hidden": "true", className: "inline-flex shrink-0 leading-none", children: item.icon })), _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";

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

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

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

@@ -15,6 +15,17 @@ describe("@refraktor/core/SegmentedControl", () => {
         expect(screen.getByRole("radio", { name: "React" })).toHaveAttribute("aria-checked", "true");
         expect(screen.getByRole("radio", { name: "Vue" })).toHaveAttribute("aria-checked", "false");
     });
+    it("renders data icon without changing accessible name", async () => {
+        await render(_jsx(SegmentedControl, { defaultValue: "react", data: [
+                {
+                    value: "react",
+                    label: "React",
+                    icon: _jsx("span", { "data-testid": "react-icon", children: "R" })
+                }
+            ] }));
+        expect(screen.getByTestId("react-icon")).toBeInTheDocument();
+        expect(screen.getByRole("radio", { name: "React" })).toBeInTheDocument();
+    });
     it("forwards ref correctly", async () => {
         const ref = createRef();
         await render(_jsx(SegmentedControl, { ref: ref, data: data }));

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

@@ -6,6 +6,8 @@ export interface SegmentedControlItem {
     value: string;
     /** Item label */
     label: ReactNode;
+    /** Optional item icon */
+    icon?: ReactNode;
     /** Whether item is disabled */
     disabled?: boolean;
 }

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

@@ -1 +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"}
+{"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,yBAAyB;IACzB,IAAI,CAAC,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/slider/slider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../../src/components/slider/slider.tsx"],"names":[],"mappings":"AAcA,OAAO,EAEH,oBAAoB,EAEvB,MAAM,gBAAgB,CAAC;AAaxB,QAAA,MAAM,MAAM,0DA6OV,CAAC;AAMH,eAAe,MAAM,CAAC"}
+{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../../src/components/slider/slider.tsx"],"names":[],"mappings":"AAcA,OAAO,EAEH,oBAAoB,EAEvB,MAAM,gBAAgB,CAAC;AAaxB,QAAA,MAAM,MAAM,0DAwSV,CAAC;AAMH,eAAe,MAAM,CAAC"}

package/build/components/slider/slider.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { clamp, getChangeValue, useId, useUncontrolled } from "@refraktor/utils";
 import { useTheme } from "../../theme";
 import { createClassNamesConfig, createComponentConfig, factory, useClassNames, useProps } from "../../utils";
-import { useCallback, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { getSize } from "./slider.styles";
 const defaultProps = {
     min: 0,
@@ -25,6 +25,10 @@ const Slider = factory((_props, ref) => {
     const [isDragging, setIsDragging] = useState(false);
     const [isHovered, setIsHovered] = useState(false);
     const trackRef = useRef(null);
+    const trackRectRef = useRef(null);
+    const rafRef = useRef(null);
+    const pendingPositionRef = useRef(null);
+    const lastEmittedValueRef = useRef(_value);
     const _id = useId(id);
     const sizeStyles = getSize(size);
     const getPositionFromValue = (val) => {
@@ -39,52 +43,97 @@ const Slider = factory((_props, ref) => {
             precision
         });
     }, [min, max, step, precision]);
-    const getPositionFromEvent = useCallback((event) => {
-        if (!trackRef.current)
+    const updateTrackRect = useCallback(() => {
+        trackRectRef.current = trackRef.current?.getBoundingClientRect() ?? null;
+    }, []);
+    const getPositionFromClientX = useCallback((clientX) => {
+        const rect = trackRectRef.current;
+        if (!rect || rect.width === 0)
             return 0;
-        const rect = trackRef.current.getBoundingClientRect();
-        const clientX = "touches" in event ? event.touches[0].clientX : event.clientX;
         const position = (clientX - rect.left) / rect.width;
         return clamp(position, 0, 1);
     }, []);
+    const flushPendingChange = useCallback(() => {
+        if (pendingPositionRef.current === null)
+            return;
+        const newValue = getValueFromPosition(pendingPositionRef.current);
+        pendingPositionRef.current = null;
+        if (newValue === lastEmittedValueRef.current)
+            return;
+        lastEmittedValueRef.current = newValue;
+        handleChange(newValue);
+    }, [getValueFromPosition, handleChange]);
+    const queueChange = useCallback((position) => {
+        pendingPositionRef.current = position;
+        if (rafRef.current !== null)
+            return;
+        rafRef.current = requestAnimationFrame(() => {
+            rafRef.current = null;
+            flushPendingChange();
+        });
+    }, [flushPendingChange]);
     const handleMove = useCallback((event) => {
         if (disabled)
             return;
-        const position = getPositionFromEvent(event);
-        const newValue = getValueFromPosition(position);
-        handleChange(newValue);
-    }, [disabled, getPositionFromEvent, getValueFromPosition, handleChange]);
+        const clientX = "touches" in event ? event.touches[0]?.clientX : event.clientX;
+        if (clientX === undefined)
+            return;
+        if ("touches" in event) {
+            event.preventDefault();
+        }
+        const position = getPositionFromClientX(clientX);
+        queueChange(position);
+    }, [disabled, getPositionFromClientX, queueChange]);
     const handleEnd = useCallback(() => {
+        if (rafRef.current !== null) {
+            cancelAnimationFrame(rafRef.current);
+            rafRef.current = null;
+        }
+        flushPendingChange();
         setIsDragging(false);
-        onChangeEnd?.(_value);
+        onChangeEnd?.(lastEmittedValueRef.current);
+        trackRectRef.current = null;
         document.removeEventListener("mousemove", handleMove);
         document.removeEventListener("mouseup", handleEnd);
         document.removeEventListener("touchmove", handleMove);
         document.removeEventListener("touchend", handleEnd);
-    }, [handleMove, onChangeEnd, _value]);
+        document.removeEventListener("scroll", updateTrackRect, true);
+        window.removeEventListener("resize", updateTrackRect);
+    }, [flushPendingChange, handleMove, onChangeEnd, updateTrackRect]);
     const handleStart = useCallback((event) => {
         if (disabled)
             return;
         event.preventDefault();
         setIsDragging(true);
-        const position = getPositionFromEvent(event);
-        const newValue = getValueFromPosition(position);
-        handleChange(newValue);
+        updateTrackRect();
+        const clientX = "touches" in event ? event.touches[0]?.clientX : event.clientX;
+        if (clientX === undefined)
+            return;
+        const position = getPositionFromClientX(clientX);
+        pendingPositionRef.current = position;
+        flushPendingChange();
         document.addEventListener("mousemove", handleMove);
         document.addEventListener("mouseup", handleEnd);
-        document.addEventListener("touchmove", handleMove);
+        document.addEventListener("touchmove", handleMove, {
+            passive: false
+        });
         document.addEventListener("touchend", handleEnd);
+        document.addEventListener("scroll", updateTrackRect, true);
+        window.addEventListener("resize", updateTrackRect);
     }, [
         disabled,
-        getPositionFromEvent,
-        getValueFromPosition,
-        handleChange,
+        flushPendingChange,
+        getPositionFromClientX,
         handleMove,
-        handleEnd
+        handleEnd,
+        updateTrackRect
     ]);
+    useEffect(() => {
+        lastEmittedValueRef.current = _value;
+    }, [_value]);
     const position = getPositionFromValue(_value);
     const showLabel = label !== undefined && (isDragging || (showLabelOnHover && isHovered));
-    return (_jsx("div", { ...props, ref: ref, id: _id, className: cx("relative w-full", disabled && "opacity-50 cursor-not-allowed", classes.root, className), children: _jsxs("div", { ref: trackRef, className: cx("relative w-full bg-[var(--refraktor-bg)] cursor-pointer", sizeStyles.track, getRadius(radius), disabled && "cursor-not-allowed", classes.track), onMouseDown: handleStart, onTouchStart: handleStart, children: [_jsx("div", { className: cx("absolute h-full bg-[var(--refraktor-primary)]", getRadius(radius), classes.bar), style: { width: `${position}%` } }), marks && marks.length > 0 && (_jsx("div", { className: cx("absolute inset-0", classes.markWrapper), children: marks.map((mark, index) => {
+    return (_jsx("div", { ...props, ref: ref, id: _id, className: cx("relative w-full", disabled && "opacity-50 cursor-not-allowed", classes.root, className), children: _jsxs("div", { ref: trackRef, className: cx("relative w-full bg-[var(--refraktor-bg)] cursor-pointer touch-none", sizeStyles.track, getRadius(radius), disabled && "cursor-not-allowed", classes.track), onMouseDown: handleStart, onTouchStart: handleStart, children: [_jsx("div", { className: cx("absolute h-full bg-[var(--refraktor-primary)]", getRadius(radius), classes.bar), style: { width: `${position}%` } }), marks && marks.length > 0 && (_jsx("div", { className: cx("absolute inset-0", classes.markWrapper), children: marks.map((mark, index) => {
                         const markPosition = getPositionFromValue(mark.value);
                         const isActive = mark.value <= _value;
                         return (_jsxs("div", { className: "absolute top-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col items-center", style: { left: `${markPosition}%` }, children: [_jsx("div", { className: cx("w-1 h-1 rounded-full", isActive

package/build/components/tooltip/tooltip.js

@@ -56,7 +56,7 @@ const Tooltip = factory((_props, ref) => {
                 ...floatingStyles,
                 zIndex: 1000,
                 ...style
-            }, className: cx("z-50 px-1.5 py-0.5 text-sm bg-[var(--refraktor-bg)] text-[var(--refraktor-text)] shadow-md", getRadius(radius), classes.content, className), ...getFloatingProps(), ...props, children: [content, showArrow && (_jsx(FloatingArrow, { ref: arrowRef, context: context, width: 10, height: 5, className: cx("fill-[var(--refraktor-bg)]", classes.arrow) }))] }) }));
+            }, className: cx("z-50 px-2 py-1 text-xs font-medium bg-[var(--refraktor-bg)] text-[var(--refraktor-text)]", getRadius(radius), classes.content, className), ...getFloatingProps(), ...props, children: [content, showArrow && (_jsx(FloatingArrow, { ref: arrowRef, context: context, width: 10, height: 5, className: cx("fill-[var(--refraktor-bg)]", classes.arrow) }))] }) }));
     return (_jsxs("div", { className: cx("inline-block", classes.root), children: [_jsx("span", { className: cx("inline-block", classes.trigger), children: triggerElement }), withinPortal ? (_jsx(FloatingPortal, { children: tooltipContent })) : (tooltipContent)] }));
 });
 Tooltip.displayName = "@refraktor/core/Tooltip";

package/build/icons/eye-off.d.ts

@@ -0,0 +1,4 @@
+import { IconProps } from "./types";
+declare const EyeOffIcon: ({ size, className, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export default EyeOffIcon;
+//# sourceMappingURL=eye-off.d.ts.map

package/build/icons/eye-off.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"eye-off.d.ts","sourceRoot":"","sources":["../../src/icons/eye-off.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC,QAAA,MAAM,UAAU,GAAI,+BAAoC,SAAS,4CAyBhE,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/build/icons/eye-off.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const EyeOffIcon = ({ size = 20, className, ...props }) => {
+    return (_jsx("svg", { fill: "currentColor", viewBox: "0 0 32 32", version: "1.1", xmlns: "http://www.w3.org/2000/svg", width: size, height: size, className: className, ...props, children: _jsxs("g", { children: [_jsx("path", { d: "M16.108 10.044c-3.313 0-6 2.687-6 6s2.687 6 6 6 6-2.686 6-6-2.686-6-6-6zM16.108 20.044c-2.206 0-4.046-1.838-4.046-4.044s1.794-4 4-4c2.206 0 4 1.794 4 4s-1.748 4.044-3.954 4.044zM31.99 15.768c-0.012-0.050-0.006-0.104-0.021-0.153-0.006-0.021-0.020-0.033-0.027-0.051-0.011-0.028-0.008-0.062-0.023-0.089-2.909-6.66-9.177-10.492-15.857-10.492s-13.074 3.826-15.984 10.486c-0.012 0.028-0.010 0.057-0.021 0.089-0.007 0.020-0.021 0.030-0.028 0.049-0.015 0.050-0.009 0.103-0.019 0.154-0.018 0.090-0.035 0.178-0.035 0.269s0.017 0.177 0.035 0.268c0.010 0.050 0.003 0.105 0.019 0.152 0.006 0.023 0.021 0.032 0.028 0.052 0.010 0.027 0.008 0.061 0.021 0.089 2.91 6.658 9.242 10.428 15.922 10.428s13.011-3.762 15.92-10.422c0.015-0.029 0.012-0.058 0.023-0.090 0.007-0.017 0.020-0.030 0.026-0.050 0.015-0.049 0.011-0.102 0.021-0.154 0.018-0.090 0.034-0.177 0.034-0.27 0-0.088-0.017-0.175-0.035-0.266zM16 25.019c-5.665 0-11.242-2.986-13.982-8.99 2.714-5.983 8.365-9.047 14.044-9.047 5.678 0 11.203 3.067 13.918 9.053-2.713 5.982-8.301 8.984-13.981 8.984z" }), _jsx("path", { d: "M4 4 L28 28", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", fill: "none" })] }) }));
+};
+export default EyeOffIcon;

package/build/icons/eye.d.ts

@@ -0,0 +1,4 @@
+import { IconProps } from "./types";
+declare const EyeIcon: ({ size, className, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export default EyeIcon;
+//# sourceMappingURL=eye.d.ts.map

package/build/icons/eye.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"eye.d.ts","sourceRoot":"","sources":["../../src/icons/eye.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC,QAAA,MAAM,OAAO,GAAI,+BAAoC,SAAS,4CAmB7D,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/build/icons/eye.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const EyeIcon = ({ size = 20, className, ...props }) => {
+    return (_jsxs("svg", { fill: "currentColor", viewBox: "0 0 32 32", version: "1.1", xmlns: "http://www.w3.org/2000/svg", width: size, height: size, className: className, ...props, children: [_jsx("g", { strokeWidth: "0" }), _jsx("g", { strokeLinecap: "round", strokeLinejoin: "round" }), _jsxs("g", { children: [_jsx("path", { d: "M16.108 10.044c-3.313 0-6 2.687-6 6s2.687 6 6 6 6-2.686 6-6-2.686-6-6-6zM16.108 20.044c-2.206 0-4.046-1.838-4.046-4.044s1.794-4 4-4c2.206 0 4 1.794 4 4s-1.748 4.044-3.954 4.044zM31.99 15.768c-0.012-0.050-0.006-0.104-0.021-0.153-0.006-0.021-0.020-0.033-0.027-0.051-0.011-0.028-0.008-0.062-0.023-0.089-2.909-6.66-9.177-10.492-15.857-10.492s-13.074 3.826-15.984 10.486c-0.012 0.028-0.010 0.057-0.021 0.089-0.007 0.020-0.021 0.030-0.028 0.049-0.015 0.050-0.009 0.103-0.019 0.154-0.018 0.090-0.035 0.178-0.035 0.269s0.017 0.177 0.035 0.268c0.010 0.050 0.003 0.105 0.019 0.152 0.006 0.023 0.021 0.032 0.028 0.052 0.010 0.027 0.008 0.061 0.021 0.089 2.91 6.658 9.242 10.428 15.922 10.428s13.011-3.762 15.92-10.422c0.015-0.029 0.012-0.058 0.023-0.090 0.007-0.017 0.020-0.030 0.026-0.050 0.015-0.049 0.011-0.102 0.021-0.154 0.018-0.090 0.034-0.177 0.034-0.27 0-0.088-0.017-0.175-0.035-0.266zM16 25.019c-5.665 0-11.242-2.986-13.982-8.99 2.714-5.983 8.365-9.047 14.044-9.047 5.678 0 11.203 3.067 13.918 9.053-2.713 5.982-8.301 8.984-13.981 8.984z" }), " "] })] }));
+};
+export default EyeIcon;

package/build/icons/index.d.ts

@@ -1,5 +1,7 @@
 export { default as ChevronIcon } from "./chevron";
 export { default as CheckIcon } from "./check";
+export { default as EyeIcon } from "./eye";
+export { default as EyeOffIcon } from "./eye-off";
 export { default as MinusIcon } from "./minus";
 export { default as UserIcon } from "./user";
 export { default as XIcon } from "./x";

package/build/icons/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/icons/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,WAAW,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,SAAS,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,SAAS,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,KAAK,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/icons/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,WAAW,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,SAAS,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,WAAW,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,SAAS,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,KAAK,CAAC"}

package/build/icons/index.js

@@ -1,5 +1,7 @@
 export { default as ChevronIcon } from "./chevron";
 export { default as CheckIcon } from "./check";
+export { default as EyeIcon } from "./eye";
+export { default as EyeOffIcon } from "./eye-off";
 export { default as MinusIcon } from "./minus";
 export { default as UserIcon } from "./user";
 export { default as XIcon } from "./x";