@refraktor/core 0.0.1

package/build/components/select/select.context.js

@@ -0,0 +1,56 @@
+import { createOptionalContext, createSafeContext } from "@refraktor/utils";
+import { useCallback, useRef } from "react";
+export const [SelectProvider, useSelectContext] = createSafeContext("Select component was not found in tree. Make sure Select.Trigger, Select.Dropdown, Select.Group and Select.Item are wrapped with Select.Root or Select.");
+export const [SelectGroupProvider, useSelectGroupContext] = createOptionalContext();
+export function useSelectItemsRegistry() {
+    const itemsRef = useRef([]);
+    const registerItem = useCallback((item) => {
+        itemsRef.current = [
+            ...itemsRef.current.filter((x) => x.id !== item.id),
+            item
+        ];
+        return () => {
+            itemsRef.current = itemsRef.current.filter((x) => x.id !== item.id);
+        };
+    }, []);
+    const getItems = useCallback(() => sortSelectItems(itemsRef.current), []);
+    return {
+        registerItem,
+        getItems
+    };
+}
+export function sortSelectItems(items) {
+    return [...items].sort((a, b) => {
+        const aNode = a.ref.current;
+        const bNode = b.ref.current;
+        if (!aNode || !bNode || aNode === bNode) {
+            return 0;
+        }
+        const position = aNode.compareDocumentPosition(bNode);
+        if (position & Node.DOCUMENT_POSITION_FOLLOWING) {
+            return -1;
+        }
+        if (position & Node.DOCUMENT_POSITION_PRECEDING) {
+            return 1;
+        }
+        return 0;
+    });
+}
+export function getNavigableSelectItems(items) {
+    return items.filter((item) => !item.disabled);
+}
+export function findFocusedSelectItemIndex(items) {
+    return items.findIndex((item) => item.ref.current === document.activeElement);
+}
+export function focusSelectItem(item) {
+    item?.ref.current?.focus();
+}
+export function getNodeTextValue(children, explicitTextValue) {
+    if (explicitTextValue) {
+        return explicitTextValue;
+    }
+    if (typeof children === "string" || typeof children === "number") {
+        return String(children);
+    }
+    return "";
+}

package/build/components/select/select.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/components/select/select.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAGR,oBAAoB,EAGvB,MAAM,gBAAgB,CAAC;AAMxB,QAAA,MAAM,MAAM,0DAgDV,CAAC;AAWH,eAAe,MAAM,CAAC"}

package/build/components/select/select.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createClassNamesConfig, createComponentConfig, factory } from "../../utils";
+import { SelectDropdown } from "./select-dropdown";
+import { SelectGroup } from "./select-group";
+import { SelectItem } from "./select-item";
+import { SelectRoot } from "./select-root";
+import { SelectTrigger } from "./select-trigger";
+function isGroupData(item) {
+    return "items" in item;
+}
+const Select = factory((_props, ref) => {
+    const { data, children, ...props } = _props;
+    if (children !== undefined && children !== null) {
+        return (_jsx(SelectRoot, { ref: ref, ...props, children: children }));
+    }
+    return (_jsxs(SelectRoot, { ref: ref, ...props, children: [_jsx(SelectTrigger, {}), _jsx(SelectDropdown, { children: (data ?? []).map((entry, index) => {
+                    if (isGroupData(entry)) {
+                        return (_jsx(SelectGroup, { label: entry.label, children: entry.items.map((item) => (_jsx(SelectItem, { value: item.value, disabled: item.disabled, textValue: item.textValue, children: item.label }, item.value))) }, `group-${index}`));
+                    }
+                    return (_jsx(SelectItem, { value: entry.value, disabled: entry.disabled, textValue: entry.textValue, children: entry.label }, entry.value));
+                }) })] }));
+});
+Select.displayName = "@refraktor/core/Select";
+Select.configure = createComponentConfig();
+Select.classNames = createClassNamesConfig();
+Select.Root = SelectRoot;
+Select.Trigger = SelectTrigger;
+Select.Dropdown = SelectDropdown;
+Select.Group = SelectGroup;
+Select.Item = SelectItem;
+export default Select;

package/build/components/select/select.test.d.ts

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

package/build/components/select/select.test.d.ts.map

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

package/build/components/select/select.test.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { describe, expect, it, vi } from "vitest";
+import { render, screen, userEvent, waitFor } from "../../vitest";
+import Select from "./select";
+describe("@refraktor/core/Select", () => {
+    const transitionProps = {
+        duration: 0,
+        immediate: true
+    };
+    it("supports built-in data mode", async () => {
+        const user = userEvent.setup();
+        await render(_jsx(Select, { placeholder: "Pick framework", transitionProps: transitionProps, data: [
+                { value: "react", label: "React" },
+                { value: "vue", label: "Vue" }
+            ] }));
+        const trigger = screen.getByRole("combobox");
+        expect(trigger).toHaveAttribute("placeholder", "Pick framework");
+        await user.click(trigger);
+        await user.click(screen.getByRole("option", { name: "React" }));
+        expect(trigger).toHaveValue("React");
+        await waitFor(() => {
+            expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+        });
+    });
+    it("renders searchable input inside dropdown", async () => {
+        const user = userEvent.setup();
+        await render(_jsx(Select, { searchable: true, transitionProps: transitionProps, data: [
+                { value: "react", label: "React" },
+                { value: "vue", label: "Vue" },
+                { value: "solid", label: "Solid" }
+            ] }));
+        await user.click(screen.getByRole("combobox"));
+        const searchInput = screen.getByPlaceholderText("Search...");
+        expect(searchInput).toBeInTheDocument();
+        await user.type(searchInput, "vu");
+        expect(screen.getByRole("option", { name: "Vue" })).toBeInTheDocument();
+        expect(screen.queryByRole("option", { name: "React" })).not.toBeInTheDocument();
+        await user.clear(searchInput);
+        await user.type(searchInput, "unknown");
+        expect(screen.getByText("No options")).toBeInTheDocument();
+    });
+    it("supports compound mode with groups", async () => {
+        const user = userEvent.setup();
+        await render(_jsxs(Select.Root, { transitionProps: transitionProps, children: [_jsx(Select.Trigger, {}), _jsxs(Select.Dropdown, { children: [_jsx(Select.Group, { label: "Frontend", children: _jsx(Select.Item, { value: "react", children: "React" }) }), _jsx(Select.Group, { label: "Backend", children: _jsx(Select.Item, { value: "node", children: "Node.js" }) })] })] }));
+        const trigger = screen.getByRole("combobox");
+        await user.click(trigger);
+        expect(screen.getByText("Frontend")).toBeInTheDocument();
+        expect(screen.getByText("Backend")).toBeInTheDocument();
+        await user.click(screen.getByRole("option", { name: "Node.js" }));
+        expect(trigger).toHaveValue("Node.js");
+    });
+    it("supports keyboard selection", async () => {
+        const user = userEvent.setup();
+        await render(_jsx(Select, { transitionProps: transitionProps, data: [
+                { value: "react", label: "React" },
+                { value: "vue", label: "Vue" }
+            ] }));
+        const trigger = screen.getByRole("combobox");
+        trigger.focus();
+        await user.keyboard("{ArrowDown}");
+        await user.keyboard("{ArrowDown}");
+        await user.keyboard("{Enter}");
+        expect(trigger).toHaveValue("Vue");
+    });
+    it("supports controlled mode", async () => {
+        const user = userEvent.setup();
+        const onChange = vi.fn();
+        function Demo() {
+            const [value, setValue] = useState("react");
+            return (_jsx(Select, { value: value, onChange: (nextValue) => {
+                    onChange(nextValue);
+                    setValue(nextValue);
+                }, transitionProps: transitionProps, data: [
+                    { value: "react", label: "React" },
+                    { value: "vue", label: "Vue" }
+                ] }));
+        }
+        await render(_jsx(Demo, {}));
+        await user.click(screen.getByRole("combobox"));
+        await user.click(screen.getByRole("option", { name: "Vue" }));
+        expect(onChange).toHaveBeenCalledWith("vue");
+        expect(screen.getByRole("combobox")).toHaveValue("Vue");
+    });
+});

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

@@ -0,0 +1,185 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import type { FlipOptions, InlineOptions, Placement, ShiftOptions } from "@floating-ui/react";
+import type { RefraktorRadius, RefraktorSize } from "../../theme";
+import { createClassNamesConfig, createComponentConfig, FactoryPayload } from "../../utils";
+import type { TransitionProps } from "../transition";
+import type { InputVariant } from "../input";
+import type { SelectRoot } from "./select-root";
+import type { SelectTrigger } from "./select-trigger";
+import type { SelectDropdown } from "./select-dropdown";
+import type { SelectGroup } from "./select-group";
+import type { SelectItem } from "./select-item";
+export type SelectClassNames = {
+    root?: string;
+    trigger?: string;
+    triggerInput?: string;
+    triggerIcon?: string;
+    dropdown?: string;
+    search?: string;
+    searchInput?: string;
+    options?: string;
+    group?: string;
+    groupLabel?: string;
+    item?: string;
+    itemLabel?: string;
+    itemCheck?: string;
+    empty?: string;
+};
+export type SelectPositioning = {
+    /** The placement of the dropdown relative to the trigger @default `bottom-start` */
+    placement?: Placement;
+    /** Offset distance from the trigger in pixels @default `4` */
+    offset?: number;
+};
+export type SelectMiddlewares = {
+    shift?: boolean | ShiftOptions;
+    flip?: boolean | FlipOptions;
+    inline?: boolean | InlineOptions;
+};
+export interface SelectItemData {
+    /** Option value */
+    value: string;
+    /** Option label */
+    label: ReactNode;
+    /** Optional searchable text for non-string labels */
+    textValue?: string;
+    /** Whether the option is disabled */
+    disabled?: boolean;
+}
+export interface SelectGroupData {
+    /** Group label */
+    label?: ReactNode;
+    /** Group items */
+    items: SelectItemData[];
+}
+export type SelectData = SelectItemData | SelectGroupData;
+export interface SelectRootProps extends Omit<ComponentPropsWithoutRef<"div">, "value" | "defaultValue" | "onChange"> {
+    /** Children containing select subcomponents */
+    children: ReactNode;
+    /** Selected value (controlled) */
+    value?: string | null;
+    /** Initial selected value (uncontrolled) */
+    defaultValue?: string | null;
+    /** Callback called when selected value changes */
+    onChange?: (value: string | null) => void;
+    /** Dropdown open state (controlled) */
+    opened?: boolean;
+    /** Initial dropdown open state (uncontrolled) */
+    defaultOpened?: boolean;
+    /** Callback called when dropdown open state changes */
+    onOpenedChange?: (opened: boolean) => void;
+    /** Positioning settings */
+    positioning?: SelectPositioning;
+    /** Floating middleware settings */
+    middlewares?: SelectMiddlewares;
+    /** Whether select is disabled @default `false` */
+    disabled?: boolean;
+    /** Whether to render searchable input inside dropdown @default `false` */
+    searchable?: boolean;
+    /** Search query (controlled) */
+    searchValue?: string;
+    /** Initial search query (uncontrolled) */
+    defaultSearchValue?: string;
+    /** Callback called when search query changes */
+    onSearchChange?: (value: string) => void;
+    /** Trigger placeholder text @default `Select option` */
+    placeholder?: string;
+    /** Search input placeholder @default `Search...` */
+    searchPlaceholder?: string;
+    /** Content rendered when no options match @default `No options` */
+    nothingFound?: ReactNode;
+    /** Trigger and search input size @default `md` */
+    size?: RefraktorSize;
+    /** Trigger and search input radius @default `default` */
+    radius?: RefraktorRadius;
+    /** Trigger and search input variant @default `default` */
+    variant?: InputVariant;
+    /** Whether to render dropdown in portal @default `true` */
+    withinPortal?: boolean;
+    /** Whether to close on click outside @default `true` */
+    closeOnClickOutside?: boolean;
+    /** Whether to close on Escape key @default `true` */
+    closeOnEscape?: boolean;
+    /** Transition props for dropdown, uses Transition internally */
+    transitionProps?: Omit<TransitionProps, "children" | "mounted">;
+    /** Used for editing root class name */
+    className?: string;
+    /** Used for styling different parts of the component */
+    classNames?: SelectClassNames;
+}
+export interface SelectTriggerProps extends ComponentPropsWithoutRef<"div"> {
+    /** Trigger placeholder override */
+    placeholder?: string;
+    /** Optional custom right section */
+    rightSection?: ReactNode;
+    /** Used for editing root class name */
+    className?: string;
+}
+export interface SelectDropdownProps extends ComponentPropsWithoutRef<"div"> {
+    /** Content displayed inside dropdown */
+    children: ReactNode;
+    /** Used for editing root class name */
+    className?: string;
+}
+export interface SelectGroupProps extends ComponentPropsWithoutRef<"div"> {
+    /** Group label */
+    label?: ReactNode;
+    /** Group content */
+    children: ReactNode;
+    /** Used for editing root class name */
+    className?: string;
+}
+export interface SelectItemProps extends Omit<ComponentPropsWithoutRef<"button">, "value" | "onSelect"> {
+    /** Option value */
+    value: string;
+    /** Option content */
+    children: ReactNode;
+    /** Callback called when option is selected */
+    onSelect?: (value: string) => void;
+    /** Optional searchable text for non-string children */
+    textValue?: string;
+    /** Whether option is disabled */
+    disabled?: boolean;
+    /** Used for editing root class name */
+    className?: string;
+}
+export interface SelectProps extends Omit<SelectRootProps, "children"> {
+    /** Compound children. If provided, data-based rendering is skipped */
+    children?: ReactNode;
+    /** Data used for built-in rendering mode */
+    data?: SelectData[];
+}
+export interface SelectFactoryPayload extends FactoryPayload {
+    props: SelectProps;
+    ref: HTMLDivElement;
+    compound: {
+        configure: ReturnType<typeof createComponentConfig<SelectProps>>;
+        classNames: ReturnType<typeof createClassNamesConfig<SelectClassNames>>;
+        Root: typeof SelectRoot;
+        Trigger: typeof SelectTrigger;
+        Dropdown: typeof SelectDropdown;
+        Group: typeof SelectGroup;
+        Item: typeof SelectItem;
+    };
+}
+export interface SelectRootFactoryPayload extends FactoryPayload {
+    props: SelectRootProps;
+    ref: HTMLDivElement;
+}
+export interface SelectTriggerFactoryPayload extends FactoryPayload {
+    props: SelectTriggerProps;
+    ref: HTMLDivElement;
+}
+export interface SelectDropdownFactoryPayload extends FactoryPayload {
+    props: SelectDropdownProps;
+    ref: HTMLDivElement;
+}
+export interface SelectGroupFactoryPayload extends FactoryPayload {
+    props: SelectGroupProps;
+    ref: HTMLDivElement;
+}
+export interface SelectItemFactoryPayload extends FactoryPayload {
+    props: SelectItemProps;
+    ref: HTMLButtonElement;
+}
+//# sourceMappingURL=select.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"select.types.d.ts","sourceRoot":"","sources":["../../../src/components/select/select.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACjE,OAAO,KAAK,EACR,WAAW,EACX,aAAa,EACb,SAAS,EACT,YAAY,EACf,MAAM,oBAAoB,CAAC;AAC5B,OAAO,KAAK,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAClE,OAAO,EACH,sBAAsB,EACtB,qBAAqB,EACrB,cAAc,EACjB,MAAM,aAAa,CAAC;AACrB,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD,MAAM,MAAM,gBAAgB,GAAG;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC5B,oFAAoF;IACpF,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB,8DAA8D;IAC9D,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC5B,KAAK,CAAC,EAAE,OAAO,GAAG,YAAY,CAAC;IAC/B,IAAI,CAAC,EAAE,OAAO,GAAG,WAAW,CAAC;IAC7B,MAAM,CAAC,EAAE,OAAO,GAAG,aAAa,CAAC;CACpC,CAAC;AAEF,MAAM,WAAW,cAAc;IAC3B,mBAAmB;IACnB,KAAK,EAAE,MAAM,CAAC;IAEd,mBAAmB;IACnB,KAAK,EAAE,SAAS,CAAC;IAEjB,qDAAqD;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,eAAe;IAC5B,kBAAkB;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,kBAAkB;IAClB,KAAK,EAAE,cAAc,EAAE,CAAC;CAC3B;AAED,MAAM,MAAM,UAAU,GAAG,cAAc,GAAG,eAAe,CAAC;AAE1D,MAAM,WAAW,eACb,SAAQ,IAAI,CACR,wBAAwB,CAAC,KAAK,CAAC,EAC/B,OAAO,GAAG,cAAc,GAAG,UAAU,CACxC;IACD,+CAA+C;IAC/C,QAAQ,EAAE,SAAS,CAAC;IAEpB,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAEtB,4CAA4C;IAC5C,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAE7B,kDAAkD;IAClD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAE1C,uCAAuC;IACvC,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,iDAAiD;IACjD,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,uDAAuD;IACvD,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAE3C,2BAA2B;IAC3B,WAAW,CAAC,EAAE,iBAAiB,CAAC;IAEhC,mCAAmC;IACnC,WAAW,CAAC,EAAE,iBAAiB,CAAC;IAEhC,kDAAkD;IAClD,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,0EAA0E;IAC1E,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,gCAAgC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,0CAA0C;IAC1C,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAE5B,gDAAgD;IAChD,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEzC,wDAAwD;IACxD,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,oDAAoD;IACpD,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B,mEAAmE;IACnE,YAAY,CAAC,EAAE,SAAS,CAAC;IAEzB,kDAAkD;IAClD,IAAI,CAAC,EAAE,aAAa,CAAC;IAErB,yDAAyD;IACzD,MAAM,CAAC,EAAE,eAAe,CAAC;IAEzB,0DAA0D;IAC1D,OAAO,CAAC,EAAE,YAAY,CAAC;IAEvB,2DAA2D;IAC3D,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,wDAAwD;IACxD,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B,qDAAqD;IACrD,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,gEAAgE;IAChE,eAAe,CAAC,EAAE,IAAI,CAAC,eAAe,EAAE,UAAU,GAAG,SAAS,CAAC,CAAC;IAEhE,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,wDAAwD;IACxD,UAAU,CAAC,EAAE,gBAAgB,CAAC;CACjC;AAED,MAAM,WAAW,kBAAmB,SAAQ,wBAAwB,CAAC,KAAK,CAAC;IACvE,mCAAmC;IACnC,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,oCAAoC;IACpC,YAAY,CAAC,EAAE,SAAS,CAAC;IAEzB,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,mBAAoB,SAAQ,wBAAwB,CAAC,KAAK,CAAC;IACxE,wCAAwC;IACxC,QAAQ,EAAE,SAAS,CAAC;IAEpB,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,gBAAiB,SAAQ,wBAAwB,CAAC,KAAK,CAAC;IACrE,kBAAkB;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,oBAAoB;IACpB,QAAQ,EAAE,SAAS,CAAC;IAEpB,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,eACb,SAAQ,IAAI,CAAC,wBAAwB,CAAC,QAAQ,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IACtE,mBAAmB;IACnB,KAAK,EAAE,MAAM,CAAC;IAEd,qBAAqB;IACrB,QAAQ,EAAE,SAAS,CAAC;IAEpB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEnC,uDAAuD;IACvD,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC;IAClE,sEAAsE;IACtE,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB,4CAA4C;IAC5C,IAAI,CAAC,EAAE,UAAU,EAAE,CAAC;CACvB;AAED,MAAM,WAAW,oBAAqB,SAAQ,cAAc;IACxD,KAAK,EAAE,WAAW,CAAC;IACnB,GAAG,EAAE,cAAc,CAAC;IACpB,QAAQ,EAAE;QACN,SAAS,EAAE,UAAU,CAAC,OAAO,qBAAqB,CAAC,WAAW,CAAC,CAAC,CAAC;QACjE,UAAU,EAAE,UAAU,CAAC,OAAO,sBAAsB,CAAC,gBAAgB,CAAC,CAAC,CAAC;QACxE,IAAI,EAAE,OAAO,UAAU,CAAC;QACxB,OAAO,EAAE,OAAO,aAAa,CAAC;QAC9B,QAAQ,EAAE,OAAO,cAAc,CAAC;QAChC,KAAK,EAAE,OAAO,WAAW,CAAC;QAC1B,IAAI,EAAE,OAAO,UAAU,CAAC;KAC3B,CAAC;CACL;AAED,MAAM,WAAW,wBAAyB,SAAQ,cAAc;IAC5D,KAAK,EAAE,eAAe,CAAC;IACvB,GAAG,EAAE,cAAc,CAAC;CACvB;AAED,MAAM,WAAW,2BAA4B,SAAQ,cAAc;IAC/D,KAAK,EAAE,kBAAkB,CAAC;IAC1B,GAAG,EAAE,cAAc,CAAC;CACvB;AAED,MAAM,WAAW,4BAA6B,SAAQ,cAAc;IAChE,KAAK,EAAE,mBAAmB,CAAC;IAC3B,GAAG,EAAE,cAAc,CAAC;CACvB;AAED,MAAM,WAAW,yBAA0B,SAAQ,cAAc;IAC7D,KAAK,EAAE,gBAAgB,CAAC;IACxB,GAAG,EAAE,cAAc,CAAC;CACvB;AAED,MAAM,WAAW,wBAAyB,SAAQ,cAAc;IAC5D,KAAK,EAAE,eAAe,CAAC;IACvB,GAAG,EAAE,iBAAiB,CAAC;CAC1B"}

package/build/components/select/select.types.js

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

package/build/components/select/use-select.d.ts

@@ -0,0 +1,32 @@
+import { FloatingContext, Placement } from "@floating-ui/react";
+import type { SelectMiddlewares, SelectPositioning } from "./select.types";
+interface UseSelectProps {
+    opened?: boolean;
+    defaultOpened?: boolean;
+    onOpenedChange?: (opened: boolean) => void;
+    positioning?: SelectPositioning;
+    middlewares?: SelectMiddlewares;
+    disabled?: boolean;
+    closeOnClickOutside?: boolean;
+    closeOnEscape?: boolean;
+}
+export interface UseSelectReturn {
+    opened: boolean;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+    context: FloatingContext;
+    refs: {
+        setReference: (node: HTMLElement | null) => void;
+        setFloating: (node: HTMLElement | null) => void;
+        reference: React.MutableRefObject<HTMLElement | null>;
+        floating: React.MutableRefObject<HTMLElement | null>;
+    };
+    floatingStyles: React.CSSProperties;
+    getReferenceProps: (userProps?: React.HTMLAttributes<HTMLElement>) => Record<string, unknown>;
+    getFloatingProps: (userProps?: React.HTMLAttributes<HTMLElement>) => Record<string, unknown>;
+    placement: Placement;
+}
+export declare function useSelect(options?: UseSelectProps): UseSelectReturn;
+export {};
+//# sourceMappingURL=use-select.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-select.d.ts","sourceRoot":"","sources":["../../../src/components/select/use-select.ts"],"names":[],"mappings":"AACA,OAAO,EAGH,eAAe,EAIf,SAAS,EAMZ,MAAM,oBAAoB,CAAC;AAE5B,OAAO,KAAK,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAE3E,UAAU,cAAc;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,WAAW,CAAC,EAAE,iBAAiB,CAAC;IAChC,WAAW,CAAC,EAAE,iBAAiB,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,aAAa,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,WAAW,eAAe;IAC5B,MAAM,EAAE,OAAO,CAAC;IAChB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,OAAO,EAAE,eAAe,CAAC;IACzB,IAAI,EAAE;QACF,YAAY,EAAE,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;QACjD,WAAW,EAAE,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;QAChD,SAAS,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;QACtD,QAAQ,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;KACxD,CAAC;IACF,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC;IACpC,iBAAiB,EAAE,CACf,SAAS,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,KAC5C,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC7B,gBAAgB,EAAE,CACd,SAAS,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,KAC5C,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC7B,SAAS,EAAE,SAAS,CAAC;CACxB;AAED,wBAAgB,SAAS,CAAC,OAAO,GAAE,cAAmB,GAAG,eAAe,CAqHvE"}

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

@@ -0,0 +1,85 @@
+import { useUncontrolled } from "@refraktor/utils";
+import { autoUpdate, flip, inline, offset, shift, useClick, useDismiss, useFloating, useInteractions } from "@floating-ui/react";
+import { useCallback, useMemo } from "react";
+export function useSelect(options = {}) {
+    const { opened, defaultOpened, onOpenedChange, positioning = {
+        placement: "bottom-start",
+        offset: 4
+    }, middlewares = { flip: true, shift: true }, disabled = false, closeOnClickOutside = true, closeOnEscape = true } = options;
+    const [isOpen, setIsOpen] = useUncontrolled({
+        value: opened,
+        defaultValue: defaultOpened,
+        finalValue: false,
+        onChange: onOpenedChange
+    });
+    const middleware = useMemo(() => {
+        const middlewareList = [];
+        middlewareList.push(offset(positioning.offset ?? 4));
+        if (middlewares.flip) {
+            middlewareList.push(flip(typeof middlewares.flip === "boolean"
+                ? undefined
+                : middlewares.flip));
+        }
+        if (middlewares.shift) {
+            middlewareList.push(shift(typeof middlewares.shift === "boolean"
+                ? undefined
+                : middlewares.shift));
+        }
+        if (middlewares.inline) {
+            middlewareList.push(inline(typeof middlewares.inline === "boolean"
+                ? undefined
+                : middlewares.inline));
+        }
+        return middlewareList;
+    }, [positioning.offset, middlewares]);
+    const floating = useFloating({
+        placement: positioning.placement,
+        open: isOpen,
+        onOpenChange: setIsOpen,
+        middleware,
+        whileElementsMounted: autoUpdate
+    });
+    const click = useClick(floating.context, {
+        enabled: !disabled
+    });
+    const dismiss = useDismiss(floating.context, {
+        outsidePress: closeOnClickOutside,
+        escapeKey: closeOnEscape
+    });
+    const { getReferenceProps, getFloatingProps } = useInteractions([
+        click,
+        dismiss
+    ]);
+    const open = useCallback(() => {
+        if (!disabled) {
+            setIsOpen(true);
+        }
+    }, [disabled, setIsOpen]);
+    const close = useCallback(() => {
+        setIsOpen(false);
+    }, [setIsOpen]);
+    const toggle = useCallback(() => {
+        if (!disabled) {
+            setIsOpen(!isOpen);
+        }
+    }, [disabled, isOpen, setIsOpen]);
+    return {
+        opened: isOpen,
+        open,
+        close,
+        toggle,
+        context: floating.context,
+        refs: {
+            setReference: floating.refs.setReference,
+            setFloating: floating.refs.setFloating,
+            reference: floating.refs
+                .reference,
+            floating: floating.refs
+                .floating
+        },
+        floatingStyles: floating.floatingStyles,
+        getReferenceProps,
+        getFloatingProps,
+        placement: floating.placement
+    };
+}

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

@@ -0,0 +1,3 @@
+export { default as Slider } from "./slider";
+export type { SliderProps, SliderClassNames, SliderMark, SliderFactoryPayload } from "./slider.types";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/slider/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,YAAY,EACR,WAAW,EACX,gBAAgB,EAChB,UAAU,EACV,oBAAoB,EACvB,MAAM,gBAAgB,CAAC"}

package/build/components/slider/index.js

@@ -0,0 +1 @@
+export { default as Slider } from "./slider";

package/build/components/slider/slider.d.ts

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

package/build/components/slider/slider.d.ts.map

@@ -0,0 +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"}

package/build/components/slider/slider.js

@@ -0,0 +1,100 @@
+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 { getSize } from "./slider.styles";
+const defaultProps = {
+    min: 0,
+    max: 100,
+    step: 1,
+    size: "md",
+    radius: "full",
+    showLabelOnHover: false
+};
+const Slider = factory((_props, ref) => {
+    const { cx, getRadius } = useTheme();
+    const { id, value, defaultValue, onChange, onChangeEnd, min, max, step, precision, size, radius, disabled, label, showLabelOnHover, marks, className, classNames, ...props } = useProps("Slider", defaultProps, _props);
+    const classes = useClassNames("Slider", classNames);
+    const [_value, handleChange] = useUncontrolled({
+        value,
+        defaultValue,
+        finalValue: min,
+        onChange
+    });
+    const [isDragging, setIsDragging] = useState(false);
+    const [isHovered, setIsHovered] = useState(false);
+    const trackRef = useRef(null);
+    const _id = useId(id);
+    const sizeStyles = getSize(size);
+    const getPositionFromValue = (val) => {
+        return ((val - min) / (max - min)) * 100;
+    };
+    const getValueFromPosition = useCallback((position) => {
+        return getChangeValue({
+            value: position,
+            min: min,
+            max: max,
+            step: step,
+            precision
+        });
+    }, [min, max, step, precision]);
+    const getPositionFromEvent = useCallback((event) => {
+        if (!trackRef.current)
+            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 handleMove = useCallback((event) => {
+        if (disabled)
+            return;
+        const position = getPositionFromEvent(event);
+        const newValue = getValueFromPosition(position);
+        handleChange(newValue);
+    }, [disabled, getPositionFromEvent, getValueFromPosition, handleChange]);
+    const handleEnd = useCallback(() => {
+        setIsDragging(false);
+        onChangeEnd?.(_value);
+        document.removeEventListener("mousemove", handleMove);
+        document.removeEventListener("mouseup", handleEnd);
+        document.removeEventListener("touchmove", handleMove);
+        document.removeEventListener("touchend", handleEnd);
+    }, [handleMove, onChangeEnd, _value]);
+    const handleStart = useCallback((event) => {
+        if (disabled)
+            return;
+        event.preventDefault();
+        setIsDragging(true);
+        const position = getPositionFromEvent(event);
+        const newValue = getValueFromPosition(position);
+        handleChange(newValue);
+        document.addEventListener("mousemove", handleMove);
+        document.addEventListener("mouseup", handleEnd);
+        document.addEventListener("touchmove", handleMove);
+        document.addEventListener("touchend", handleEnd);
+    }, [
+        disabled,
+        getPositionFromEvent,
+        getValueFromPosition,
+        handleChange,
+        handleMove,
+        handleEnd
+    ]);
+    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) => {
+                        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
+                                        ? "bg-[var(--refraktor-colors-white)]"
+                                        : "bg-[var(--refraktor-text-tertiary)]", classes.mark) }), mark.label && (_jsx("span", { className: cx("absolute top-4 text-xs text-[var(--refraktor-text-secondary)] whitespace-nowrap", classes.markLabel), children: mark.label }))] }, index));
+                    }) })), _jsx("div", { role: "slider", tabIndex: disabled ? -1 : 0, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": _value, "aria-disabled": disabled, className: cx("absolute top-1/2 -translate-x-1/2 -translate-y-1/2", "bg-[var(--refraktor-colors-white)] shadow-md border border-[var(--refraktor-border)]", "cursor-grab active:cursor-grabbing transition-transform hover:scale-110 focus:outline-none", sizeStyles.thumb, getRadius(radius), disabled && "cursor-not-allowed hover:scale-100", classes.thumb), style: { left: `${position}%` }, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: showLabel && (_jsx("div", { className: cx("absolute bottom-full left-1/2 -translate-x-1/2 mb-2", "bg-[var(--refraktor-bg)] text-[var(--refraktor-text)] rounded", "whitespace-nowrap pointer-events-none", sizeStyles.label, classes.label), children: typeof label === "function"
+                            ? label(_value)
+                            : (label ?? _value) })) })] }) }));
+});
+Slider.displayName = "@refraktor/core/Slider";
+Slider.configure = createComponentConfig();
+Slider.classNames = createClassNamesConfig();
+export default Slider;

package/build/components/slider/slider.styles.d.ts

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

package/build/components/slider/slider.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.styles.d.ts","sourceRoot":"","sources":["../../../src/components/slider/slider.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,KAAK,gBAAgB,GAAG;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACjB,CAAC;AA8BF,eAAO,MAAM,OAAO,GAAI,OAAM,aAAoB,qBAAgB,CAAC"}