@refraktor/core 0.0.3 → 0.0.4

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

@@ -0,0 +1 @@
+{"version":3,"file":"password-input.types.d.ts","sourceRoot":"","sources":["../../../src/components/password-input/password-input.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,UAAU,EAAE,MAAM,CAAC;IAChE,mEAAmE;IACnE,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAE/B,gCAAgC;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,+BAA+B;IAC/B,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB,8CAA8C;IAC9C,kBAAkB,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAEhD,yEAAyE;IACzE,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B,wEAAwE;IACxE,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAED,MAAM,WAAW,2BAA4B,SAAQ,cAAc;IAC/D,KAAK,EAAE,kBAAkB,CAAC;IAC1B,GAAG,EAAE,gBAAgB,CAAC;IACtB,QAAQ,EAAE;QACN,SAAS,EAAE,UAAU,CAAC,OAAO,qBAAqB,CAAC,kBAAkB,CAAC,CAAC,CAAC;KAC3E,CAAC;CACL"}

package/build/components/password-input/password-input.types.js

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

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

@@ -0,0 +1,3 @@
+export { default as PinInput } from "./pin-input";
+export * from "./pin-input.types";
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -0,0 +1,2 @@
+export { default as PinInput } from "./pin-input";
+export * from "./pin-input.types";

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"pin-input.d.ts","sourceRoot":"","sources":["../../../src/components/pin-input/pin-input.tsx"],"names":[],"mappings":"AAYA,OAAO,EAGH,sBAAsB,EAGzB,MAAM,mBAAmB,CAAC;AAyG3B,QAAA,MAAM,QAAQ,4DAuVZ,CAAC;AAMH,eAAe,QAAQ,CAAC"}

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

@@ -0,0 +1,245 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useUncontrolled } from "@refraktor/utils";
+import { useCallback, useMemo, useRef } from "react";
+import { useTheme } from "../../theme";
+import { createClassNamesConfig, createComponentConfig, factory, useClassNames, useProps } from "../../utils";
+import { getVariant } from "../input/input-field/input-field.styles";
+import { InputWrapper } from "../input/input-wrapper";
+const CHARACTER_SET_PATTERNS = {
+    numeric: /^[0-9]$/,
+    alphabetic: /^[A-Za-z]$/,
+    alphanumeric: /^[A-Za-z0-9]$/,
+    all: /^.$/
+};
+const CELL_SIZES = {
+    xs: "h-7 w-7 text-[10px]",
+    sm: "h-8 w-8 text-xs",
+    md: "h-10 w-10 text-sm",
+    lg: "h-12 w-12 text-base",
+    xl: "h-14 w-14 text-lg"
+};
+const defaultProps = {
+    length: 6,
+    variant: "default",
+    size: "md",
+    radius: "default",
+    mask: false,
+    characterSet: "numeric",
+    transform: "none",
+    ariaLabelPrefix: "Character",
+    autoComplete: "one-time-code"
+};
+function normalizeLength(value) {
+    const length = Number.isFinite(value) ? Math.trunc(value) : 6;
+    return Math.max(1, length);
+}
+function transformCharacter(char, transform) {
+    if (transform === "uppercase") {
+        return char.toUpperCase();
+    }
+    if (transform === "lowercase") {
+        return char.toLowerCase();
+    }
+    return char;
+}
+function isAllowedCharacter(char, characterSet, characterPattern) {
+    const pattern = characterPattern ?? CHARACTER_SET_PATTERNS[characterSet];
+    pattern.lastIndex = 0;
+    return pattern.test(char);
+}
+function toSanitizedChars(value, options) {
+    const result = [];
+    for (const rawChar of value) {
+        const transformedChar = transformCharacter(rawChar, options.transform);
+        if (transformedChar &&
+            isAllowedCharacter(transformedChar, options.characterSet, options.characterPattern)) {
+            result.push(transformedChar);
+        }
+    }
+    return result;
+}
+function toCellArray(value, length, options) {
+    const chars = toSanitizedChars(value, options).slice(0, length);
+    return Array.from({ length }, (_, index) => chars[index] ?? "");
+}
+function normalizeCells(cells, length) {
+    return Array.from({ length }, (_, index) => cells?.[index] ?? "");
+}
+const PinInput = factory((_props, ref) => {
+    const { cx, getRadius } = useTheme();
+    const { id, label, description, error, required, withAsterisk, length, value, defaultValue, onChange, onComplete, mask, characterSet, characterPattern, transform, ariaLabelPrefix, name, variant, size, radius, disabled, className, classNames, inputMode, autoComplete, placeholder, ...props } = useProps("PinInput", defaultProps, _props);
+    const classes = useClassNames("PinInput", classNames);
+    const _id = useId(id);
+    const resolvedLength = normalizeLength(length);
+    const sanitizingOptions = useMemo(() => ({
+        characterSet,
+        characterPattern,
+        transform
+    }), [characterSet, characterPattern, transform]);
+    const emptyCells = useMemo(() => Array.from({ length: resolvedLength }, () => ""), [resolvedLength]);
+    const [_valueCells, setValueCells] = useUncontrolled({
+        value: value === undefined
+            ? undefined
+            : toCellArray(String(value), resolvedLength, sanitizingOptions),
+        defaultValue: defaultValue === undefined
+            ? undefined
+            : toCellArray(String(defaultValue), resolvedLength, sanitizingOptions),
+        finalValue: emptyCells,
+        onChange: (nextCells) => onChange?.(nextCells.join(""))
+    });
+    const chars = useMemo(() => normalizeCells(_valueCells, resolvedLength), [_valueCells, resolvedLength]);
+    const charsRef = useRef(chars);
+    charsRef.current = chars;
+    const completedValueRef = useRef(null);
+    const inputRefs = useRef([]);
+    const hasWrapper = label || description || error;
+    const describedBy = error
+        ? `${_id}-error`
+        : description
+            ? `${_id}-description`
+            : undefined;
+    const resolvedInputMode = inputMode ?? (characterSet === "numeric" ? "numeric" : "text");
+    const emitValue = useCallback((nextChars) => {
+        setValueCells(nextChars);
+        const nextValue = nextChars.join("");
+        if (!nextChars.includes("")) {
+            if (completedValueRef.current !== nextValue) {
+                onComplete?.(nextValue);
+                completedValueRef.current = nextValue;
+            }
+        }
+        else {
+            completedValueRef.current = null;
+        }
+    }, [onComplete, setValueCells]);
+    const focusCell = useCallback((index) => {
+        if (index < 0 || index >= resolvedLength) {
+            return;
+        }
+        setTimeout(() => {
+            const input = inputRefs.current[index];
+            if (!input) {
+                return;
+            }
+            input.focus();
+            input.select();
+        }, 0);
+    }, [resolvedLength]);
+    const fillFromIndex = useCallback((index, incoming) => {
+        const next = [...charsRef.current];
+        let writeIndex = index;
+        for (const char of incoming) {
+            if (writeIndex >= resolvedLength) {
+                break;
+            }
+            next[writeIndex] = char;
+            writeIndex += 1;
+        }
+        emitValue(next);
+        if (writeIndex < resolvedLength) {
+            focusCell(writeIndex);
+            return;
+        }
+        focusCell(resolvedLength - 1);
+    }, [emitValue, focusCell, resolvedLength]);
+    const handleCellChange = useCallback((index, event) => {
+        if (disabled) {
+            return;
+        }
+        const incoming = toSanitizedChars(event.currentTarget.value, sanitizingOptions);
+        if (incoming.length === 0) {
+            if (event.currentTarget.value !== "") {
+                return;
+            }
+            const next = [...charsRef.current];
+            next[index] = "";
+            emitValue(next);
+            return;
+        }
+        if (incoming.length === 1) {
+            const next = [...charsRef.current];
+            next[index] = incoming[0];
+            emitValue(next);
+            if (index < resolvedLength - 1) {
+                focusCell(index + 1);
+            }
+            return;
+        }
+        fillFromIndex(index, incoming);
+    }, [
+        disabled,
+        sanitizingOptions,
+        emitValue,
+        resolvedLength,
+        focusCell,
+        fillFromIndex
+    ]);
+    const handlePaste = useCallback((index, event) => {
+        event.preventDefault();
+        if (disabled) {
+            return;
+        }
+        const incoming = toSanitizedChars(event.clipboardData.getData("text"), sanitizingOptions);
+        if (incoming.length === 0) {
+            return;
+        }
+        fillFromIndex(index, incoming);
+    }, [disabled, sanitizingOptions, fillFromIndex]);
+    const handleKeyDown = useCallback((index, event) => {
+        if (disabled) {
+            return;
+        }
+        if (event.key === "ArrowLeft") {
+            event.preventDefault();
+            focusCell(index - 1);
+            return;
+        }
+        if (event.key === "ArrowRight") {
+            event.preventDefault();
+            focusCell(index + 1);
+            return;
+        }
+        if (event.key === "Home") {
+            event.preventDefault();
+            focusCell(0);
+            return;
+        }
+        if (event.key === "End") {
+            event.preventDefault();
+            focusCell(resolvedLength - 1);
+            return;
+        }
+        if (event.key === "Backspace") {
+            event.preventDefault();
+            const next = [...charsRef.current];
+            if (next[index]) {
+                next[index] = "";
+                emitValue(next);
+                return;
+            }
+            if (index > 0) {
+                next[index - 1] = "";
+                emitValue(next);
+                focusCell(index - 1);
+            }
+            return;
+        }
+        if (event.key === "Delete") {
+            event.preventDefault();
+            const next = [...charsRef.current];
+            next[index] = "";
+            emitValue(next);
+        }
+    }, [disabled, emitValue, focusCell, resolvedLength]);
+    const field = (_jsxs("div", { ref: ref, className: cx("flex w-full items-center gap-2", className, classes.root), children: [chars.map((char, index) => (_jsx("input", { ...props, id: `${_id}-${index}`, ref: (node) => {
+                    inputRefs.current[index] = node;
+                }, type: mask ? "password" : "text", inputMode: resolvedInputMode, autoComplete: index === 0 ? autoComplete : "off", maxLength: resolvedLength, value: char, disabled: disabled, required: required && index === 0, placeholder: placeholder, "aria-invalid": error ? true : undefined, "aria-describedby": describedBy, "aria-label": `${ariaLabelPrefix} ${index + 1} of ${resolvedLength}`, className: cx("flex-none text-center font-medium tabular-nums outline-none transition-colors", "focus:border-[var(--refraktor-primary)]", getVariant(variant), getRadius(radius), CELL_SIZES[size], error && "border-[var(--refraktor-colors-red-6)]", disabled && "cursor-not-allowed opacity-50", classes.cell), onChange: (event) => handleCellChange(index, event), onKeyDown: (event) => handleKeyDown(index, event), onPaste: (event) => handlePaste(index, event), onFocus: (event) => event.currentTarget.select() }, `${_id}-cell-${index}`))), name && _jsx("input", { type: "hidden", name: name, value: chars.join("") })] }));
+    if (!hasWrapper) {
+        return field;
+    }
+    return (_jsx(InputWrapper, { label: label, description: description, error: error, required: required, withAsterisk: withAsterisk, inputId: `${_id}-0`, children: field }));
+});
+PinInput.displayName = "@refraktor/core/PinInput";
+PinInput.configure = createComponentConfig();
+PinInput.classNames = createClassNamesConfig();
+export default PinInput;

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

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

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

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

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

@@ -0,0 +1,87 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { describe, expect, it, vi } from "vitest";
+import { render, screen, userEvent } from "../../vitest";
+import PinInput from "./pin-input";
+const getCells = (length) => Array.from({ length }, (_, index) => screen.getByLabelText(`Character ${index + 1} of ${length}`));
+describe("@refraktor/core/PinInput", () => {
+    it("supports input wrapper props", async () => {
+        await render(_jsx(PinInput, { label: "Verification code", description: "Enter the code from your authenticator app", error: "Code is required" }));
+        const firstCell = screen.getByLabelText("Verification code");
+        expect(firstCell).toHaveAttribute("aria-invalid", "true");
+        expect(screen.getByText("Enter the code from your authenticator app")).toBeInTheDocument();
+        expect(screen.getByText("Code is required")).toBeInTheDocument();
+    });
+    it("auto-advances focus and fires onComplete", async () => {
+        const user = userEvent.setup();
+        const onComplete = vi.fn();
+        await render(_jsx(PinInput, { length: 4, onComplete: onComplete }));
+        const cells = getCells(4);
+        await user.type(cells[0], "1");
+        expect(cells[1]).toHaveFocus();
+        await user.type(cells[1], "2");
+        await user.type(cells[2], "3");
+        await user.type(cells[3], "4");
+        expect(onComplete).toHaveBeenCalledTimes(1);
+        expect(onComplete).toHaveBeenCalledWith("1234");
+    });
+    it("handles backspace navigation", async () => {
+        const user = userEvent.setup();
+        await render(_jsx(PinInput, { length: 4 }));
+        const cells = getCells(4);
+        await user.type(cells[0], "1");
+        await user.type(cells[1], "2");
+        expect(cells[2]).toHaveFocus();
+        await user.keyboard("{Backspace}");
+        expect(cells[1]).toHaveFocus();
+        expect(cells[1]).toHaveValue("");
+    });
+    it("handles paste across cells", async () => {
+        const user = userEvent.setup();
+        await render(_jsx(PinInput, { length: 6, characterSet: "alphanumeric" }));
+        const cells = getCells(6);
+        cells[0].focus();
+        await user.paste("A1B2C3");
+        expect(cells.map((cell) => cell.value)).toEqual([
+            "A",
+            "1",
+            "B",
+            "2",
+            "C",
+            "3"
+        ]);
+    });
+    it("supports alphanumeric and custom filtering props", async () => {
+        const user = userEvent.setup();
+        await render(_jsx(PinInput, { length: 4, characterPattern: /[A-F0-9]/, transform: "uppercase" }));
+        const cells = getCells(4);
+        await user.type(cells[0], "a");
+        await user.type(cells[1], "g");
+        await user.type(cells[1], "9");
+        expect(cells[0]).toHaveValue("A");
+        expect(cells[1]).toHaveValue("9");
+    });
+    it("supports controlled usage", async () => {
+        const user = userEvent.setup();
+        function Demo() {
+            const [value, setValue] = useState("");
+            return _jsx(PinInput, { length: 4, value: value, onChange: setValue });
+        }
+        await render(_jsx(Demo, {}));
+        const cells = getCells(4);
+        await user.type(cells[0], "1");
+        await user.type(cells[1], "2");
+        expect(cells[0]).toHaveValue("1");
+        expect(cells[1]).toHaveValue("2");
+    });
+    it("supports masking and hidden form value", async () => {
+        await render(_jsx(PinInput, { length: 4, defaultValue: "A1B2", characterSet: "alphanumeric", mask: true, name: "otp" }));
+        const cells = getCells(4);
+        for (const cell of cells) {
+            expect(cell).toHaveAttribute("type", "password");
+        }
+        const hidden = document.querySelector('input[type="hidden"][name="otp"]');
+        expect(hidden).not.toBeNull();
+        expect(hidden?.value).toBe("A1B2");
+    });
+});

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

@@ -0,0 +1,44 @@
+import { createClassNamesConfig, createComponentConfig, FactoryPayload } from "../../utils";
+import { InputProps } from "../input";
+export type PinInputCharacterSet = "numeric" | "alphabetic" | "alphanumeric" | "all";
+export type PinInputTransform = "none" | "uppercase" | "lowercase";
+export type PinInputClassNames = {
+    root?: string;
+    cell?: string;
+};
+export interface _PinInputProps {
+    /** OTP length @default `6` */
+    length?: number;
+    /** Value (controlled) */
+    value?: string;
+    /** Default value (uncontrolled) */
+    defaultValue?: string;
+    /** Callback called whenever the code value changes */
+    onChange?: (value: string) => void;
+    /** Callback called when all cells are filled */
+    onComplete?: (value: string) => void;
+    /** Masks entered characters @default `false` */
+    mask?: boolean;
+    /** Character set filter @default `numeric` */
+    characterSet?: PinInputCharacterSet;
+    /** Optional custom character pattern (overrides characterSet) */
+    characterPattern?: RegExp;
+    /** Character transform @default `none` */
+    transform?: PinInputTransform;
+    /** Accessible label prefix for each cell @default `Character` */
+    ariaLabelPrefix?: string;
+    /** Hidden input name for form submission */
+    name?: string;
+    /** Used for styling different parts of the component */
+    classNames?: PinInputClassNames;
+}
+export type PinInputProps = _PinInputProps & Omit<InputProps, "type" | "value" | "defaultValue" | "onChange" | "leftSection" | "rightSection" | "maxLength">;
+export interface PinInputFactoryPayload extends FactoryPayload {
+    props: PinInputProps;
+    ref: HTMLDivElement;
+    compound: {
+        configure: ReturnType<typeof createComponentConfig<PinInputProps>>;
+        classNames: ReturnType<typeof createClassNamesConfig<PinInputClassNames>>;
+    };
+}
+//# sourceMappingURL=pin-input.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pin-input.types.d.ts","sourceRoot":"","sources":["../../../src/components/pin-input/pin-input.types.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,sBAAsB,EACtB,qBAAqB,EACrB,cAAc,EACjB,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,MAAM,MAAM,oBAAoB,GAC1B,SAAS,GACT,YAAY,GACZ,cAAc,GACd,KAAK,CAAC;AAEZ,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,WAAW,GAAG,WAAW,CAAC;AAEnE,MAAM,MAAM,kBAAkB,GAAG;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,WAAW,cAAc;IAC3B,8BAA8B;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,mCAAmC;IACnC,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEnC,gDAAgD;IAChD,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAErC,gDAAgD;IAChD,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf,8CAA8C;IAC9C,YAAY,CAAC,EAAE,oBAAoB,CAAC;IAEpC,iEAAiE;IACjE,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAE9B,iEAAiE;IACjE,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,4CAA4C;IAC5C,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,wDAAwD;IACxD,UAAU,CAAC,EAAE,kBAAkB,CAAC;CACnC;AAED,MAAM,MAAM,aAAa,GAAG,cAAc,GACtC,IAAI,CACA,UAAU,EACR,MAAM,GACN,OAAO,GACP,cAAc,GACd,UAAU,GACV,aAAa,GACb,cAAc,GACd,WAAW,CAChB,CAAC;AAEN,MAAM,WAAW,sBAAuB,SAAQ,cAAc;IAC1D,KAAK,EAAE,aAAa,CAAC;IACrB,GAAG,EAAE,cAAc,CAAC;IACpB,QAAQ,EAAE;QACN,SAAS,EAAE,UAAU,CAAC,OAAO,qBAAqB,CAAC,aAAa,CAAC,CAAC,CAAC;QACnE,UAAU,EAAE,UAAU,CAAC,OAAO,sBAAsB,CAAC,kBAAkB,CAAC,CAAC,CAAC;KAC7E,CAAC;CACL"}

package/build/components/pin-input/pin-input.types.js

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

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

@@ -0,0 +1,3 @@
+export { default as ScrollArea } from "./scroll-area";
+export type { ScrollAreaProps, ScrollAreaClassNames, ScrollAreaOrientation } from "./scroll-area.types";
+//# sourceMappingURL=index.d.ts.map

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];