@refraktor/core 0.0.2 → 0.0.3

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-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-[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/split-pane/index.d.ts

@@ -0,0 +1,3 @@
+export { default as SplitPane } from "./split-pane";
+export type { SplitPaneProps, SplitPaneClassNames, SplitPaneOrientation, SplitPaneFactoryPayload } from "./split-pane.types";
+//# sourceMappingURL=index.d.ts.map

package/build/components/split-pane/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/split-pane/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,cAAc,CAAC;AACpD,YAAY,EACR,cAAc,EACd,mBAAmB,EACnB,oBAAoB,EACpB,uBAAuB,EAC1B,MAAM,oBAAoB,CAAC"}

package/build/components/split-pane/index.js

@@ -0,0 +1 @@
+export { default as SplitPane } from "./split-pane";

package/build/components/split-pane/split-pane.d.ts

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

package/build/components/split-pane/split-pane.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"split-pane.d.ts","sourceRoot":"","sources":["../../../src/components/split-pane/split-pane.tsx"],"names":[],"mappings":"AAoBA,OAAO,EAEH,uBAAuB,EAE1B,MAAM,oBAAoB,CAAC;AAsC5B,QAAA,MAAM,SAAS,6DAgTb,CAAC;AAMH,eAAe,SAAS,CAAC"}

package/build/components/split-pane/split-pane.js

@@ -0,0 +1,201 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { clamp, useId, useUncontrolled } from "@refraktor/utils";
+import { Children, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useTheme } from "../../theme";
+import { createClassNamesConfig, createComponentConfig, factory, useClassNames, useProps } from "../../utils";
+import { getHandleSize } from "./split-pane.styles";
+const defaultProps = {
+    defaultValue: 50,
+    min: 20,
+    max: 80,
+    step: 1,
+    orientation: "horizontal",
+    handleSize: "md",
+    handleAriaLabel: "Resize panels",
+    disabled: false
+};
+const getStepPrecision = (step) => {
+    const parts = String(step).split(".");
+    return parts.length > 1 ? parts[1].length : 0;
+};
+const getClientCoordinates = (event) => {
+    if ("touches" in event && event.touches.length > 0) {
+        const touch = event.touches[0];
+        return { clientX: touch.clientX, clientY: touch.clientY };
+    }
+    if ("changedTouches" in event && event.changedTouches.length > 0) {
+        const touch = event.changedTouches[0];
+        return { clientX: touch.clientX, clientY: touch.clientY };
+    }
+    if ("clientX" in event && "clientY" in event) {
+        return { clientX: event.clientX, clientY: event.clientY };
+    }
+    return null;
+};
+const SplitPane = factory((_props, ref) => {
+    const { cx } = useTheme();
+    const { id, children, value, defaultValue, onChange, onChangeEnd, min, max, step, orientation, handleSize, handleAriaLabel, disabled, className, classNames, style, ...props } = useProps("SplitPane", defaultProps, _props);
+    const classes = useClassNames("SplitPane", classNames);
+    const minValue = Math.min(min, max);
+    const maxValue = Math.max(min, max);
+    const safeStep = step > 0 ? step : 1;
+    const stepPrecision = getStepPrecision(safeStep);
+    const normalizeValue = useCallback((nextValue) => {
+        const bounded = clamp(nextValue, minValue, maxValue);
+        const stepped = Math.round((bounded - minValue) / safeStep) * safeStep +
+            minValue;
+        return clamp(Number(stepped.toFixed(stepPrecision + 2)), minValue, maxValue);
+    }, [minValue, maxValue, safeStep, stepPrecision]);
+    const [_value, setValue] = useUncontrolled({
+        value,
+        defaultValue,
+        finalValue: minValue,
+        onChange
+    });
+    const [isDragging, setIsDragging] = useState(false);
+    const rootRef = useRef(null);
+    const valueRef = useRef(normalizeValue(_value));
+    const _id = useId(id);
+    const setRefs = (node) => {
+        rootRef.current = node;
+        if (typeof ref === "function") {
+            ref(node);
+        }
+        else if (ref) {
+            ref.current = node;
+        }
+    };
+    useEffect(() => {
+        valueRef.current = normalizeValue(_value);
+    }, [_value, normalizeValue]);
+    const updateValue = useCallback((nextValue) => {
+        const resolved = normalizeValue(nextValue);
+        if (resolved === valueRef.current) {
+            return valueRef.current;
+        }
+        valueRef.current = resolved;
+        setValue(resolved);
+        return resolved;
+    }, [normalizeValue, setValue]);
+    const getValueFromEvent = useCallback((event) => {
+        if (!rootRef.current) {
+            return valueRef.current;
+        }
+        const coordinates = getClientCoordinates(event);
+        if (!coordinates) {
+            return valueRef.current;
+        }
+        const rect = rootRef.current.getBoundingClientRect();
+        if (orientation === "horizontal") {
+            if (rect.width <= 0) {
+                return valueRef.current;
+            }
+            const ratio = (coordinates.clientX - rect.left) / rect.width;
+            return ratio * 100;
+        }
+        if (rect.height <= 0) {
+            return valueRef.current;
+        }
+        const ratio = (coordinates.clientY - rect.top) / rect.height;
+        return ratio * 100;
+    }, [orientation]);
+    const handleMove = useCallback((event) => {
+        if (disabled) {
+            return;
+        }
+        if ("touches" in event) {
+            event.preventDefault();
+        }
+        const nextValue = getValueFromEvent(event);
+        updateValue(nextValue);
+    }, [disabled, getValueFromEvent, updateValue]);
+    const handleEnd = useCallback(() => {
+        setIsDragging(false);
+        onChangeEnd?.(valueRef.current);
+        document.removeEventListener("mousemove", handleMove);
+        document.removeEventListener("mouseup", handleEnd);
+        document.removeEventListener("touchmove", handleMove);
+        document.removeEventListener("touchend", handleEnd);
+    }, [handleMove, onChangeEnd]);
+    const handleStart = useCallback((event) => {
+        if (disabled) {
+            return;
+        }
+        event.preventDefault();
+        setIsDragging(true);
+        const nextValue = getValueFromEvent(event);
+        updateValue(nextValue);
+        document.addEventListener("mousemove", handleMove);
+        document.addEventListener("mouseup", handleEnd);
+        document.addEventListener("touchmove", handleMove, {
+            passive: false
+        });
+        document.addEventListener("touchend", handleEnd);
+    }, [disabled, getValueFromEvent, updateValue, handleMove, handleEnd]);
+    useEffect(() => {
+        return () => {
+            document.removeEventListener("mousemove", handleMove);
+            document.removeEventListener("mouseup", handleEnd);
+            document.removeEventListener("touchmove", handleMove);
+            document.removeEventListener("touchend", handleEnd);
+        };
+    }, [handleMove, handleEnd]);
+    const currentValue = normalizeValue(_value);
+    const handleThickness = getHandleSize(handleSize);
+    const layoutStyles = useMemo(() => {
+        if (orientation === "horizontal") {
+            return {
+                gridTemplateColumns: `${currentValue}% ${handleThickness} minmax(0, 1fr)`
+            };
+        }
+        return {
+            gridTemplateRows: `${currentValue}% ${handleThickness} minmax(0, 1fr)`
+        };
+    }, [orientation, currentValue, handleThickness]);
+    const [firstPane, secondPane] = Children.toArray(children);
+    const getStyles = (part) => classes[part];
+    return (_jsxs("div", { ref: setRefs, id: _id, "data-orientation": orientation, "data-disabled": disabled, className: cx("grid h-full w-full overflow-hidden", isDragging && "select-none", disabled && "opacity-60", getStyles("root"), className), style: {
+            ...layoutStyles,
+            ...style
+        }, ...props, children: [_jsx("div", { className: cx("min-h-0 min-w-0 overflow-auto", getStyles("pane"), getStyles("firstPane")), children: firstPane }), _jsx("div", { role: "separator", "aria-label": handleAriaLabel, "aria-orientation": orientation, "aria-valuemin": minValue, "aria-valuemax": maxValue, "aria-valuenow": currentValue, "aria-disabled": disabled, tabIndex: disabled ? -1 : 0, "data-dragging": isDragging, className: cx("group relative flex items-center justify-center bg-[var(--refraktor-bg-subtle)]", orientation === "horizontal"
+                    ? "cursor-col-resize"
+                    : "cursor-row-resize", disabled && "cursor-not-allowed", getStyles("handle")), onMouseDown: handleStart, onTouchStart: handleStart, onKeyDown: (event) => {
+                    if (disabled) {
+                        return;
+                    }
+                    const previousValue = valueRef.current;
+                    let targetValue = null;
+                    if (event.key === "Home") {
+                        targetValue = minValue;
+                    }
+                    else if (event.key === "End") {
+                        targetValue = maxValue;
+                    }
+                    else if (orientation === "horizontal") {
+                        if (event.key === "ArrowLeft") {
+                            targetValue = previousValue - safeStep;
+                        }
+                        else if (event.key === "ArrowRight") {
+                            targetValue = previousValue + safeStep;
+                        }
+                    }
+                    else if (event.key === "ArrowUp") {
+                        targetValue = previousValue - safeStep;
+                    }
+                    else if (event.key === "ArrowDown") {
+                        targetValue = previousValue + safeStep;
+                    }
+                    if (targetValue === null) {
+                        return;
+                    }
+                    event.preventDefault();
+                    const nextValue = updateValue(targetValue);
+                    if (nextValue !== previousValue) {
+                        onChangeEnd?.(nextValue);
+                    }
+                }, children: _jsx("span", { "aria-hidden": "true", className: cx("rounded-full bg-[var(--refraktor-border)] transition-colors group-data-[dragging=true]:bg-[var(--refraktor-primary)]", orientation === "horizontal" ? "h-8 w-px" : "h-px w-8", getStyles("handleBar")) }) }), _jsx("div", { className: cx("min-h-0 min-w-0 overflow-auto", getStyles("pane"), getStyles("secondPane")), children: secondPane })] }));
+});
+SplitPane.displayName = "@refraktor/core/SplitPane";
+SplitPane.configure = createComponentConfig();
+SplitPane.classNames = createClassNamesConfig();
+export default SplitPane;

package/build/components/split-pane/split-pane.styles.d.ts

@@ -0,0 +1,3 @@
+import { RefraktorSize } from "../../theme";
+export declare const getHandleSize: (size?: RefraktorSize) => string;
+//# sourceMappingURL=split-pane.styles.d.ts.map

package/build/components/split-pane/split-pane.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"split-pane.styles.d.ts","sourceRoot":"","sources":["../../../src/components/split-pane/split-pane.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAU5C,eAAO,MAAM,aAAa,GAAI,OAAM,aAAoB,WAAsB,CAAC"}

package/build/components/split-pane/split-pane.styles.js

@@ -0,0 +1,8 @@
+const handleSizes = {
+    xs: "0.25rem",
+    sm: "0.375rem",
+    md: "0.5rem",
+    lg: "0.625rem",
+    xl: "0.75rem"
+};
+export const getHandleSize = (size = "md") => handleSizes[size];

package/build/components/split-pane/split-pane.test.d.ts

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

package/build/components/split-pane/split-pane.test.d.ts.map

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