@arolariu/components/dist/components/ui/select.js

🎨 70+ beautiful, accessible React components built on Base UI. TypeScript-first, CSS Modules styling, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡

"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { mergeProps } from "@base-ui/react/merge-props";
import { Select } from "@base-ui/react/select";
import { useRender } from "@base-ui/react/use-render";
import { Check, ChevronDown, ChevronUp } from "lucide-react";
import { cn } from "../../lib/utilities.js";
import select_module from "./select.module.js";
import * as __rspack_external_react from "react";
function select_Select(props) {
    const { onValueChange, ...otherProps } = props;
    const handleChange = __rspack_external_react.useCallback((value)=>{
        if (onValueChange && "string" == typeof value) onValueChange(value);
    }, [
        onValueChange
    ]);
    return /*#__PURE__*/ jsx(Select.Root, {
        onValueChange: handleChange,
        ...otherProps
    });
}
select_Select.displayName = "Select";
const SelectGroup = Select.Group;
SelectGroup.displayName = "SelectGroup";
const SelectValue = Select.Value;
SelectValue.displayName = "SelectValue";
const SelectTrigger = /*#__PURE__*/ __rspack_external_react.forwardRef((props, ref)=>{
    const { className, children, render, ...otherProps } = props;
    return /*#__PURE__*/ jsxs(Select.Trigger, {
        ref: ref,
        ...otherProps,
        render: useRender({
            defaultTagName: "button",
            render: render,
            props: mergeProps({
                className: cn(select_module.trigger, className)
            }, {})
        }),
        children: [
            children,
            /*#__PURE__*/ jsx(Select.Icon, {
                className: select_module.icon,
                children: /*#__PURE__*/ jsx(ChevronDown, {
                    className: select_module.iconSvg
                })
            })
        ]
    });
});
SelectTrigger.displayName = "SelectTrigger";
function SelectScrollUpButton(props) {
    const { className, children, render, ...otherProps } = props;
    return /*#__PURE__*/ jsx(Select.ScrollUpArrow, {
        ...otherProps,
        render: useRender({
            defaultTagName: "div",
            render: render,
            props: mergeProps({
                className: cn(select_module.scrollButton, className)
            }, {})
        }),
        children: children ?? /*#__PURE__*/ jsx(ChevronUp, {
            className: select_module.scrollIcon
        })
    });
}
SelectScrollUpButton.displayName = "SelectScrollUpButton";
function SelectScrollDownButton(props) {
    const { className, children, render, ...otherProps } = props;
    return /*#__PURE__*/ jsx(Select.ScrollDownArrow, {
        ...otherProps,
        render: useRender({
            defaultTagName: "div",
            render: render,
            props: mergeProps({
                className: cn(select_module.scrollButton, className)
            }, {})
        }),
        children: children ?? /*#__PURE__*/ jsx(ChevronDown, {
            className: select_module.scrollIcon
        })
    });
}
SelectScrollDownButton.displayName = "SelectScrollDownButton";
const SelectContent = /*#__PURE__*/ __rspack_external_react.forwardRef((props, ref)=>{
    const { className, children, render, sideOffset = 4, ...otherProps } = props;
    return /*#__PURE__*/ jsx(Select.Portal, {
        children: /*#__PURE__*/ jsx(Select.Positioner, {
            sideOffset: sideOffset,
            ...otherProps,
            render: useRender({
                defaultTagName: "div",
                props: mergeProps({
                    className: select_module.positioner
                }, {})
            }),
            children: /*#__PURE__*/ jsxs(Select.Popup, {
                ref: ref,
                render: useRender({
                    defaultTagName: "div",
                    render: render,
                    props: mergeProps({
                        className: cn(select_module.popup, className)
                    }, {})
                }),
                children: [
                    /*#__PURE__*/ jsx(SelectScrollUpButton, {}),
                    /*#__PURE__*/ jsx(Select.List, {
                        className: select_module.list,
                        children: children
                    }),
                    /*#__PURE__*/ jsx(SelectScrollDownButton, {})
                ]
            })
        })
    });
});
SelectContent.displayName = "SelectContent";
function SelectLabel(props) {
    const { className, children, render, ...otherProps } = props;
    return /*#__PURE__*/ jsx(Select.GroupLabel, {
        ...otherProps,
        render: useRender({
            defaultTagName: "div",
            render: render,
            props: mergeProps({
                className: cn(select_module.label, className)
            }, {})
        }),
        children: children
    });
}
SelectLabel.displayName = "SelectLabel";
function SelectItem(props) {
    const { className, children, render, ...otherProps } = props;
    return /*#__PURE__*/ jsxs(Select.Item, {
        ...otherProps,
        render: useRender({
            defaultTagName: "div",
            render: render,
            props: mergeProps({
                className: cn(select_module.item, className)
            }, {})
        }),
        children: [
            /*#__PURE__*/ jsx("span", {
                className: select_module.itemIndicatorSlot,
                children: /*#__PURE__*/ jsx(Select.ItemIndicator, {
                    children: /*#__PURE__*/ jsx(Check, {
                        className: select_module.itemIndicatorIcon
                    })
                })
            }),
            /*#__PURE__*/ jsx(Select.ItemText, {
                className: select_module.itemText,
                children: children
            })
        ]
    });
}
SelectItem.displayName = "SelectItem";
function SelectSeparator(props) {
    const { className, render, ...otherProps } = props;
    return /*#__PURE__*/ jsx(Select.Separator, {
        ...otherProps,
        render: useRender({
            defaultTagName: "div",
            render: render,
            props: mergeProps({
                className: cn(select_module.separator, className)
            }, {})
        })
    });
}
SelectSeparator.displayName = "SelectSeparator";
export { SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, select_Select as Select };

//# sourceMappingURL=select.js.map