@ladder-ui/select 0.2.0

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, } from "./select";
+export type { SelectProps, SelectItemData, SelectContentProps, SelectGroupProps, SelectItemProps, SelectLabelProps, SelectScrollDownButtonProps, SelectScrollUpButtonProps, SelectSeparatorProps, SelectTriggerProps, SelectValueProps, } from "./select";

package/dist/index.js

@@ -0,0 +1,338 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var reactDom = require('react-dom');
+var concatClassNames = require('@ladder-ui/core/concatClassNames');
+
+// ─── Inline SVG icons ────────────────────────────────────────────────────────
+function ChevronDownIcon({ className }) {
+    return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", className: className, children: jsxRuntime.jsx("path", { d: "m6 9 6 6 6-6" }) }));
+}
+function ChevronUpIcon({ className }) {
+    return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", className: className, children: jsxRuntime.jsx("path", { d: "m18 15-6-6-6 6" }) }));
+}
+function CheckIcon({ className }) {
+    return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", className: className, children: jsxRuntime.jsx("path", { d: "M20 6 9 17l-5-5" }) }));
+}
+// ─── Label extraction helpers ────────────────────────────────────────────────
+//
+// We scan the JSX children tree in Select root to build a value→label map.
+// This works even when SelectContent renders null (closed state), because the
+// JSX element tree passed as `children` always contains the full structure.
+function extractTextContent(children) {
+    if (typeof children === "string")
+        return children;
+    if (typeof children === "number")
+        return String(children);
+    if (Array.isArray(children))
+        return children.map(extractTextContent).join("");
+    if (react.isValidElement(children)) {
+        return extractTextContent(children.props.children);
+    }
+    return "";
+}
+function scanItemLabels(children, registry) {
+    react.Children.forEach(children, (child) => {
+        if (!react.isValidElement(child))
+            return;
+        const props = child.props;
+        // Detect SelectItem by displayName on the element type function
+        const dn = typeof child.type === "function"
+            ? child.type.displayName
+            : typeof child.type === "object"
+                ? child.type.displayName
+                : undefined;
+        if (dn === "SelectItem" && (typeof props.value === "string" || props.value === null)) {
+            // null is the Shadcn-style "no selection" sentinel — stored as "" internally
+            const key = props.value ?? "";
+            const label = extractTextContent(props.children);
+            if (label)
+                registry.set(key, label);
+        }
+        // Recurse into children of non-item elements
+        if (props.children) {
+            scanItemLabels(props.children, registry);
+        }
+    });
+}
+const SelectContext = react.createContext({
+    open: false,
+    setOpen: () => { },
+    value: undefined,
+    displayLabel: "",
+    triggerId: "",
+    contentId: "",
+    triggerRef: { current: null },
+});
+function Select({ value: controlledValue, defaultValue, onValueChange, disabled, children, open: controlledOpen, onOpenChange, items, }) {
+    const [internalOpen, setInternalOpen] = react.useState(false);
+    const [internalValue, setInternalValue] = react.useState(defaultValue);
+    const isOpenControlled = controlledOpen !== undefined;
+    const isValueControlled = controlledValue !== undefined;
+    const open = isOpenControlled ? controlledOpen : internalOpen;
+    const value = isValueControlled ? controlledValue : internalValue;
+    const triggerId = react.useId();
+    const contentId = react.useId();
+    const triggerRef = react.useRef(null);
+    // Build label registry synchronously from the JSX children tree.
+    // This works even when SelectContent renders null (closed), because the
+    // JSX element tree always contains all SelectItem elements.
+    const labelsMap = new Map();
+    scanItemLabels(children, labelsMap);
+    // Merge items prop — supports null values and data-driven usage (.map()).
+    // Takes precedence over child-scanned labels for matching keys.
+    if (items) {
+        for (const item of items) {
+            labelsMap.set(item.value ?? "", item.label);
+        }
+    }
+    const displayLabel = (value !== undefined ? labelsMap.get(value) : undefined) ?? "";
+    const setOpen = react.useCallback((next) => {
+        if (!isOpenControlled)
+            setInternalOpen(next);
+        onOpenChange?.(next);
+    }, [isOpenControlled, onOpenChange]);
+    const handleValueChange = react.useCallback((newValue) => {
+        if (!isValueControlled)
+            setInternalValue(newValue);
+        onValueChange?.(newValue);
+        setOpen(false);
+    }, [isValueControlled, onValueChange, setOpen]);
+    return (jsxRuntime.jsx(SelectContext, { value: {
+            open,
+            setOpen,
+            value,
+            displayLabel,
+            onValueChange: handleValueChange,
+            disabled,
+            triggerId,
+            contentId,
+            triggerRef,
+        }, children: children }));
+}
+Select.displayName = "Select";
+function SelectTrigger({ ref, className, children, size = "default", fullWidth, disabled: propDisabled, onKeyDown, ...props }) {
+    const ctx = react.use(SelectContext);
+    const isDisabled = propDisabled || ctx.disabled;
+    // Merge consumer ref + context triggerRef
+    const setRef = (el) => {
+        ctx.triggerRef.current = el;
+        if (typeof ref === "function") {
+            ref(el);
+        }
+        else if (ref) {
+            ref.current = el;
+        }
+    };
+    const handleKeyDown = (e) => {
+        if (["ArrowDown", "ArrowUp", "Enter", " "].includes(e.key)) {
+            e.preventDefault();
+            ctx.setOpen(true);
+        }
+        onKeyDown?.(e);
+    };
+    const classes = concatClassNames("lui-select-trigger", size === "sm" ? "lui-select-trigger--sm" : undefined, fullWidth ? "lui-select-trigger--full-width" : undefined, className);
+    return (jsxRuntime.jsxs("button", { ref: setRef, type: "button", role: "combobox", id: ctx.triggerId, "aria-expanded": ctx.open, "aria-haspopup": "listbox", "aria-controls": ctx.open ? ctx.contentId : undefined, "aria-disabled": isDisabled || undefined, disabled: isDisabled, "data-slot": "select-trigger", "data-size": size, "data-full-width": fullWidth || undefined, className: classes, onClick: () => ctx.setOpen(!ctx.open), onKeyDown: handleKeyDown, ...props, children: [children, jsxRuntime.jsx(ChevronDownIcon, { className: "lui-select-trigger__chevron" })] }));
+}
+SelectTrigger.displayName = "SelectTrigger";
+function SelectValue({ placeholder, className }) {
+    const ctx = react.use(SelectContext);
+    const classes = concatClassNames("lui-select-value", className);
+    return (jsxRuntime.jsx("span", { "data-slot": "select-value", className: classes, children: ctx.displayLabel || placeholder || "" }));
+}
+SelectValue.displayName = "SelectValue";
+function SelectContent({ ref, className, children, position = "item-aligned", }) {
+    const ctx = react.use(SelectContext);
+    const contentRef = react.useRef(null);
+    // Two-pass positioning:
+    //   Pass 1 — render with visibility:hidden so browser can measure item offsets.
+    //   Pass 2 — compute correct position, set isPositioned=true → visibility:visible.
+    const [isPositioned, setIsPositioned] = react.useState(false);
+    const [coords, setCoords] = react.useState({ top: 0, left: 0, width: 0 });
+    // Pass 1→2: measure and position after first render
+    react.useEffect(() => {
+        if (!ctx.open || !contentRef.current || !ctx.triggerRef.current)
+            return;
+        const triggerRect = ctx.triggerRef.current.getBoundingClientRect();
+        const content = contentRef.current;
+        const contentHeight = content.offsetHeight;
+        const contentWidth = content.offsetWidth;
+        const viewportHeight = window.innerHeight;
+        const viewportWidth = window.innerWidth;
+        let top;
+        if (position === "item-aligned") {
+            // Align the selected item (or first item) vertically with the trigger.
+            // The item's center should coincide with the trigger's center.
+            const selectedItem = content.querySelector('[role="option"][aria-selected="true"]');
+            const firstItem = content.querySelector('[role="option"]');
+            const targetItem = selectedItem ?? firstItem;
+            if (targetItem) {
+                // offsetTop is relative to the fixed content div (its offsetParent)
+                const itemTop = targetItem.offsetTop;
+                const itemHeight = targetItem.offsetHeight;
+                // Center item with trigger: move content up so item.center = trigger.center
+                top =
+                    triggerRect.top -
+                        itemTop +
+                        (triggerRect.height - itemHeight) / 2;
+            }
+            else {
+                top = triggerRect.top;
+            }
+        }
+        else {
+            // Popper: open below trigger, fall back to above if insufficient space
+            const spaceBelow = viewportHeight - triggerRect.bottom;
+            if (spaceBelow < contentHeight + 8 && triggerRect.top > contentHeight + 8) {
+                top = triggerRect.top - contentHeight - 4;
+            }
+            else {
+                top = triggerRect.bottom + 4;
+            }
+        }
+        // Clamp to viewport with 8 px margin
+        top = Math.max(8, Math.min(top, viewportHeight - contentHeight - 8));
+        const left = Math.max(8, Math.min(triggerRect.left, viewportWidth - contentWidth - 8));
+        setCoords({ top, left, width: triggerRect.width });
+        setIsPositioned(true);
+        // Run after every open (component remounts each time, so state resets automatically)
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [ctx.open]);
+    // Focus management — wait until content is visible to avoid jarring jump
+    react.useEffect(() => {
+        if (!ctx.open || !isPositioned || !contentRef.current)
+            return;
+        const selected = contentRef.current.querySelector('[role="option"][aria-selected="true"]');
+        const first = contentRef.current.querySelector('[role="option"]:not([aria-disabled="true"])');
+        (selected ?? first)?.focus();
+    }, [ctx.open, isPositioned]);
+    // Click-outside to close
+    react.useEffect(() => {
+        if (!ctx.open)
+            return;
+        const handlePointerDown = (e) => {
+            const target = e.target;
+            if (contentRef.current &&
+                !contentRef.current.contains(target) &&
+                ctx.triggerRef.current &&
+                !ctx.triggerRef.current.contains(target)) {
+                ctx.setOpen(false);
+            }
+        };
+        document.addEventListener("pointerdown", handlePointerDown);
+        return () => document.removeEventListener("pointerdown", handlePointerDown);
+    }, [ctx.open, ctx.setOpen, ctx.triggerRef]);
+    // Keyboard navigation within the listbox
+    const handleKeyDown = (e) => {
+        const items = contentRef.current?.querySelectorAll('[role="option"]:not([aria-disabled="true"])');
+        if (!items || items.length === 0)
+            return;
+        const active = document.activeElement;
+        const currentIndex = Array.from(items).indexOf(active);
+        switch (e.key) {
+            case "ArrowDown": {
+                e.preventDefault();
+                items[Math.min(currentIndex + 1, items.length - 1)]?.focus();
+                break;
+            }
+            case "ArrowUp": {
+                e.preventDefault();
+                items[Math.max(currentIndex - 1, 0)]?.focus();
+                break;
+            }
+            case "Home": {
+                e.preventDefault();
+                items[0]?.focus();
+                break;
+            }
+            case "End": {
+                e.preventDefault();
+                items[items.length - 1]?.focus();
+                break;
+            }
+            case "Escape":
+            case "Tab": {
+                ctx.setOpen(false);
+                ctx.triggerRef.current?.focus();
+                break;
+            }
+        }
+    };
+    if (!ctx.open)
+        return null;
+    const style = {
+        position: "fixed",
+        top: coords.top,
+        left: coords.left,
+        width: coords.width || undefined,
+        minWidth: coords.width || undefined,
+        zIndex: 9999,
+        // Hidden during pass 1 to allow measurement without visual flash
+        visibility: isPositioned ? "visible" : "hidden",
+    };
+    const setRef = (el) => {
+        contentRef.current = el;
+        if (typeof ref === "function") {
+            ref(el);
+        }
+        else if (ref) {
+            ref.current = el;
+        }
+    };
+    const classes = concatClassNames("lui-select-content", className);
+    return reactDom.createPortal(jsxRuntime.jsx("div", { ref: setRef, id: ctx.contentId, role: "listbox", "aria-labelledby": ctx.triggerId, "data-slot": "select-content", "data-state": "open", className: classes, style: style, onKeyDown: handleKeyDown, children: jsxRuntime.jsx("div", { className: "lui-select-content__viewport", children: children }) }), document.body);
+}
+SelectContent.displayName = "SelectContent";
+function SelectGroup({ ref, className, children, ...props }) {
+    return (jsxRuntime.jsx("div", { ref: ref, role: "group", "data-slot": "select-group", className: concatClassNames("lui-select-group", className), ...props, children: children }));
+}
+SelectGroup.displayName = "SelectGroup";
+function SelectLabel({ ref, className, children, ...props }) {
+    return (jsxRuntime.jsx("div", { ref: ref, "data-slot": "select-label", className: concatClassNames("lui-select-label", className), ...props, children: children }));
+}
+SelectLabel.displayName = "SelectLabel";
+function SelectItem({ ref, className, children, value, disabled, onClick, onKeyDown, ...props }) {
+    const ctx = react.use(SelectContext);
+    // null is the Shadcn-style sentinel for "no selection" — normalize to ""
+    const normalizedValue = value ?? "";
+    const isSelected = ctx.value === normalizedValue;
+    const handleSelect = () => {
+        if (disabled)
+            return;
+        ctx.onValueChange?.(normalizedValue);
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            handleSelect();
+        }
+        onKeyDown?.(e);
+    };
+    const classes = concatClassNames("lui-select-item", isSelected ? "lui-select-item--selected" : undefined, disabled ? "lui-select-item--disabled" : undefined, className);
+    return (jsxRuntime.jsxs("div", { ref: ref, role: "option", "aria-selected": isSelected, "aria-disabled": disabled || undefined, tabIndex: disabled ? -1 : 0, "data-slot": "select-item", "data-value": normalizedValue, className: classes, onClick: handleSelect, onKeyDown: handleKeyDown, ...props, children: [jsxRuntime.jsx("span", { className: "lui-select-item__indicator", "aria-hidden": "true", children: isSelected && jsxRuntime.jsx(CheckIcon, { className: "lui-select-item__check" }) }), jsxRuntime.jsx("span", { className: "lui-select-item__text", children: children })] }));
+}
+SelectItem.displayName = "SelectItem";
+function SelectSeparator({ ref, className, ...props }) {
+    return (jsxRuntime.jsx("hr", { ref: ref, "data-slot": "select-separator", className: concatClassNames("lui-select-separator", className), ...props }));
+}
+SelectSeparator.displayName = "SelectSeparator";
+function SelectScrollUpButton({ ref, className, ...props }) {
+    return (jsxRuntime.jsx("div", { ref: ref, "data-slot": "select-scroll-up-button", className: concatClassNames("lui-select-scroll-button", className), ...props, children: jsxRuntime.jsx(ChevronUpIcon, { className: "lui-select-scroll-button__icon" }) }));
+}
+SelectScrollUpButton.displayName = "SelectScrollUpButton";
+function SelectScrollDownButton({ ref, className, ...props }) {
+    return (jsxRuntime.jsx("div", { ref: ref, "data-slot": "select-scroll-down-button", className: concatClassNames("lui-select-scroll-button", className), ...props, children: jsxRuntime.jsx(ChevronDownIcon, { className: "lui-select-scroll-button__icon" }) }));
+}
+SelectScrollDownButton.displayName = "SelectScrollDownButton";
+
+exports.Select = Select;
+exports.SelectContent = SelectContent;
+exports.SelectGroup = SelectGroup;
+exports.SelectItem = SelectItem;
+exports.SelectLabel = SelectLabel;
+exports.SelectScrollDownButton = SelectScrollDownButton;
+exports.SelectScrollUpButton = SelectScrollUpButton;
+exports.SelectSeparator = SelectSeparator;
+exports.SelectTrigger = SelectTrigger;
+exports.SelectValue = SelectValue;

package/dist/index.mjs

@@ -0,0 +1,327 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { createContext, useState, useId, useRef, useCallback, use, useEffect, Children, isValidElement } from 'react';
+import { createPortal } from 'react-dom';
+import concatClassNames from '@ladder-ui/core/concatClassNames';
+
+// ─── Inline SVG icons ────────────────────────────────────────────────────────
+function ChevronDownIcon({ className }) {
+    return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", className: className, children: jsx("path", { d: "m6 9 6 6 6-6" }) }));
+}
+function ChevronUpIcon({ className }) {
+    return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", className: className, children: jsx("path", { d: "m18 15-6-6-6 6" }) }));
+}
+function CheckIcon({ className }) {
+    return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", className: className, children: jsx("path", { d: "M20 6 9 17l-5-5" }) }));
+}
+// ─── Label extraction helpers ────────────────────────────────────────────────
+//
+// We scan the JSX children tree in Select root to build a value→label map.
+// This works even when SelectContent renders null (closed state), because the
+// JSX element tree passed as `children` always contains the full structure.
+function extractTextContent(children) {
+    if (typeof children === "string")
+        return children;
+    if (typeof children === "number")
+        return String(children);
+    if (Array.isArray(children))
+        return children.map(extractTextContent).join("");
+    if (isValidElement(children)) {
+        return extractTextContent(children.props.children);
+    }
+    return "";
+}
+function scanItemLabels(children, registry) {
+    Children.forEach(children, (child) => {
+        if (!isValidElement(child))
+            return;
+        const props = child.props;
+        // Detect SelectItem by displayName on the element type function
+        const dn = typeof child.type === "function"
+            ? child.type.displayName
+            : typeof child.type === "object"
+                ? child.type.displayName
+                : undefined;
+        if (dn === "SelectItem" && (typeof props.value === "string" || props.value === null)) {
+            // null is the Shadcn-style "no selection" sentinel — stored as "" internally
+            const key = props.value ?? "";
+            const label = extractTextContent(props.children);
+            if (label)
+                registry.set(key, label);
+        }
+        // Recurse into children of non-item elements
+        if (props.children) {
+            scanItemLabels(props.children, registry);
+        }
+    });
+}
+const SelectContext = createContext({
+    open: false,
+    setOpen: () => { },
+    value: undefined,
+    displayLabel: "",
+    triggerId: "",
+    contentId: "",
+    triggerRef: { current: null },
+});
+function Select({ value: controlledValue, defaultValue, onValueChange, disabled, children, open: controlledOpen, onOpenChange, items, }) {
+    const [internalOpen, setInternalOpen] = useState(false);
+    const [internalValue, setInternalValue] = useState(defaultValue);
+    const isOpenControlled = controlledOpen !== undefined;
+    const isValueControlled = controlledValue !== undefined;
+    const open = isOpenControlled ? controlledOpen : internalOpen;
+    const value = isValueControlled ? controlledValue : internalValue;
+    const triggerId = useId();
+    const contentId = useId();
+    const triggerRef = useRef(null);
+    // Build label registry synchronously from the JSX children tree.
+    // This works even when SelectContent renders null (closed), because the
+    // JSX element tree always contains all SelectItem elements.
+    const labelsMap = new Map();
+    scanItemLabels(children, labelsMap);
+    // Merge items prop — supports null values and data-driven usage (.map()).
+    // Takes precedence over child-scanned labels for matching keys.
+    if (items) {
+        for (const item of items) {
+            labelsMap.set(item.value ?? "", item.label);
+        }
+    }
+    const displayLabel = (value !== undefined ? labelsMap.get(value) : undefined) ?? "";
+    const setOpen = useCallback((next) => {
+        if (!isOpenControlled)
+            setInternalOpen(next);
+        onOpenChange?.(next);
+    }, [isOpenControlled, onOpenChange]);
+    const handleValueChange = useCallback((newValue) => {
+        if (!isValueControlled)
+            setInternalValue(newValue);
+        onValueChange?.(newValue);
+        setOpen(false);
+    }, [isValueControlled, onValueChange, setOpen]);
+    return (jsx(SelectContext, { value: {
+            open,
+            setOpen,
+            value,
+            displayLabel,
+            onValueChange: handleValueChange,
+            disabled,
+            triggerId,
+            contentId,
+            triggerRef,
+        }, children: children }));
+}
+Select.displayName = "Select";
+function SelectTrigger({ ref, className, children, size = "default", fullWidth, disabled: propDisabled, onKeyDown, ...props }) {
+    const ctx = use(SelectContext);
+    const isDisabled = propDisabled || ctx.disabled;
+    // Merge consumer ref + context triggerRef
+    const setRef = (el) => {
+        ctx.triggerRef.current = el;
+        if (typeof ref === "function") {
+            ref(el);
+        }
+        else if (ref) {
+            ref.current = el;
+        }
+    };
+    const handleKeyDown = (e) => {
+        if (["ArrowDown", "ArrowUp", "Enter", " "].includes(e.key)) {
+            e.preventDefault();
+            ctx.setOpen(true);
+        }
+        onKeyDown?.(e);
+    };
+    const classes = concatClassNames("lui-select-trigger", size === "sm" ? "lui-select-trigger--sm" : undefined, fullWidth ? "lui-select-trigger--full-width" : undefined, className);
+    return (jsxs("button", { ref: setRef, type: "button", role: "combobox", id: ctx.triggerId, "aria-expanded": ctx.open, "aria-haspopup": "listbox", "aria-controls": ctx.open ? ctx.contentId : undefined, "aria-disabled": isDisabled || undefined, disabled: isDisabled, "data-slot": "select-trigger", "data-size": size, "data-full-width": fullWidth || undefined, className: classes, onClick: () => ctx.setOpen(!ctx.open), onKeyDown: handleKeyDown, ...props, children: [children, jsx(ChevronDownIcon, { className: "lui-select-trigger__chevron" })] }));
+}
+SelectTrigger.displayName = "SelectTrigger";
+function SelectValue({ placeholder, className }) {
+    const ctx = use(SelectContext);
+    const classes = concatClassNames("lui-select-value", className);
+    return (jsx("span", { "data-slot": "select-value", className: classes, children: ctx.displayLabel || placeholder || "" }));
+}
+SelectValue.displayName = "SelectValue";
+function SelectContent({ ref, className, children, position = "item-aligned", }) {
+    const ctx = use(SelectContext);
+    const contentRef = useRef(null);
+    // Two-pass positioning:
+    //   Pass 1 — render with visibility:hidden so browser can measure item offsets.
+    //   Pass 2 — compute correct position, set isPositioned=true → visibility:visible.
+    const [isPositioned, setIsPositioned] = useState(false);
+    const [coords, setCoords] = useState({ top: 0, left: 0, width: 0 });
+    // Pass 1→2: measure and position after first render
+    useEffect(() => {
+        if (!ctx.open || !contentRef.current || !ctx.triggerRef.current)
+            return;
+        const triggerRect = ctx.triggerRef.current.getBoundingClientRect();
+        const content = contentRef.current;
+        const contentHeight = content.offsetHeight;
+        const contentWidth = content.offsetWidth;
+        const viewportHeight = window.innerHeight;
+        const viewportWidth = window.innerWidth;
+        let top;
+        if (position === "item-aligned") {
+            // Align the selected item (or first item) vertically with the trigger.
+            // The item's center should coincide with the trigger's center.
+            const selectedItem = content.querySelector('[role="option"][aria-selected="true"]');
+            const firstItem = content.querySelector('[role="option"]');
+            const targetItem = selectedItem ?? firstItem;
+            if (targetItem) {
+                // offsetTop is relative to the fixed content div (its offsetParent)
+                const itemTop = targetItem.offsetTop;
+                const itemHeight = targetItem.offsetHeight;
+                // Center item with trigger: move content up so item.center = trigger.center
+                top =
+                    triggerRect.top -
+                        itemTop +
+                        (triggerRect.height - itemHeight) / 2;
+            }
+            else {
+                top = triggerRect.top;
+            }
+        }
+        else {
+            // Popper: open below trigger, fall back to above if insufficient space
+            const spaceBelow = viewportHeight - triggerRect.bottom;
+            if (spaceBelow < contentHeight + 8 && triggerRect.top > contentHeight + 8) {
+                top = triggerRect.top - contentHeight - 4;
+            }
+            else {
+                top = triggerRect.bottom + 4;
+            }
+        }
+        // Clamp to viewport with 8 px margin
+        top = Math.max(8, Math.min(top, viewportHeight - contentHeight - 8));
+        const left = Math.max(8, Math.min(triggerRect.left, viewportWidth - contentWidth - 8));
+        setCoords({ top, left, width: triggerRect.width });
+        setIsPositioned(true);
+        // Run after every open (component remounts each time, so state resets automatically)
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [ctx.open]);
+    // Focus management — wait until content is visible to avoid jarring jump
+    useEffect(() => {
+        if (!ctx.open || !isPositioned || !contentRef.current)
+            return;
+        const selected = contentRef.current.querySelector('[role="option"][aria-selected="true"]');
+        const first = contentRef.current.querySelector('[role="option"]:not([aria-disabled="true"])');
+        (selected ?? first)?.focus();
+    }, [ctx.open, isPositioned]);
+    // Click-outside to close
+    useEffect(() => {
+        if (!ctx.open)
+            return;
+        const handlePointerDown = (e) => {
+            const target = e.target;
+            if (contentRef.current &&
+                !contentRef.current.contains(target) &&
+                ctx.triggerRef.current &&
+                !ctx.triggerRef.current.contains(target)) {
+                ctx.setOpen(false);
+            }
+        };
+        document.addEventListener("pointerdown", handlePointerDown);
+        return () => document.removeEventListener("pointerdown", handlePointerDown);
+    }, [ctx.open, ctx.setOpen, ctx.triggerRef]);
+    // Keyboard navigation within the listbox
+    const handleKeyDown = (e) => {
+        const items = contentRef.current?.querySelectorAll('[role="option"]:not([aria-disabled="true"])');
+        if (!items || items.length === 0)
+            return;
+        const active = document.activeElement;
+        const currentIndex = Array.from(items).indexOf(active);
+        switch (e.key) {
+            case "ArrowDown": {
+                e.preventDefault();
+                items[Math.min(currentIndex + 1, items.length - 1)]?.focus();
+                break;
+            }
+            case "ArrowUp": {
+                e.preventDefault();
+                items[Math.max(currentIndex - 1, 0)]?.focus();
+                break;
+            }
+            case "Home": {
+                e.preventDefault();
+                items[0]?.focus();
+                break;
+            }
+            case "End": {
+                e.preventDefault();
+                items[items.length - 1]?.focus();
+                break;
+            }
+            case "Escape":
+            case "Tab": {
+                ctx.setOpen(false);
+                ctx.triggerRef.current?.focus();
+                break;
+            }
+        }
+    };
+    if (!ctx.open)
+        return null;
+    const style = {
+        position: "fixed",
+        top: coords.top,
+        left: coords.left,
+        width: coords.width || undefined,
+        minWidth: coords.width || undefined,
+        zIndex: 9999,
+        // Hidden during pass 1 to allow measurement without visual flash
+        visibility: isPositioned ? "visible" : "hidden",
+    };
+    const setRef = (el) => {
+        contentRef.current = el;
+        if (typeof ref === "function") {
+            ref(el);
+        }
+        else if (ref) {
+            ref.current = el;
+        }
+    };
+    const classes = concatClassNames("lui-select-content", className);
+    return createPortal(jsx("div", { ref: setRef, id: ctx.contentId, role: "listbox", "aria-labelledby": ctx.triggerId, "data-slot": "select-content", "data-state": "open", className: classes, style: style, onKeyDown: handleKeyDown, children: jsx("div", { className: "lui-select-content__viewport", children: children }) }), document.body);
+}
+SelectContent.displayName = "SelectContent";
+function SelectGroup({ ref, className, children, ...props }) {
+    return (jsx("div", { ref: ref, role: "group", "data-slot": "select-group", className: concatClassNames("lui-select-group", className), ...props, children: children }));
+}
+SelectGroup.displayName = "SelectGroup";
+function SelectLabel({ ref, className, children, ...props }) {
+    return (jsx("div", { ref: ref, "data-slot": "select-label", className: concatClassNames("lui-select-label", className), ...props, children: children }));
+}
+SelectLabel.displayName = "SelectLabel";
+function SelectItem({ ref, className, children, value, disabled, onClick, onKeyDown, ...props }) {
+    const ctx = use(SelectContext);
+    // null is the Shadcn-style sentinel for "no selection" — normalize to ""
+    const normalizedValue = value ?? "";
+    const isSelected = ctx.value === normalizedValue;
+    const handleSelect = () => {
+        if (disabled)
+            return;
+        ctx.onValueChange?.(normalizedValue);
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            handleSelect();
+        }
+        onKeyDown?.(e);
+    };
+    const classes = concatClassNames("lui-select-item", isSelected ? "lui-select-item--selected" : undefined, disabled ? "lui-select-item--disabled" : undefined, className);
+    return (jsxs("div", { ref: ref, role: "option", "aria-selected": isSelected, "aria-disabled": disabled || undefined, tabIndex: disabled ? -1 : 0, "data-slot": "select-item", "data-value": normalizedValue, className: classes, onClick: handleSelect, onKeyDown: handleKeyDown, ...props, children: [jsx("span", { className: "lui-select-item__indicator", "aria-hidden": "true", children: isSelected && jsx(CheckIcon, { className: "lui-select-item__check" }) }), jsx("span", { className: "lui-select-item__text", children: children })] }));
+}
+SelectItem.displayName = "SelectItem";
+function SelectSeparator({ ref, className, ...props }) {
+    return (jsx("hr", { ref: ref, "data-slot": "select-separator", className: concatClassNames("lui-select-separator", className), ...props }));
+}
+SelectSeparator.displayName = "SelectSeparator";
+function SelectScrollUpButton({ ref, className, ...props }) {
+    return (jsx("div", { ref: ref, "data-slot": "select-scroll-up-button", className: concatClassNames("lui-select-scroll-button", className), ...props, children: jsx(ChevronUpIcon, { className: "lui-select-scroll-button__icon" }) }));
+}
+SelectScrollUpButton.displayName = "SelectScrollUpButton";
+function SelectScrollDownButton({ ref, className, ...props }) {
+    return (jsx("div", { ref: ref, "data-slot": "select-scroll-down-button", className: concatClassNames("lui-select-scroll-button", className), ...props, children: jsx(ChevronDownIcon, { className: "lui-select-scroll-button__icon" }) }));
+}
+SelectScrollDownButton.displayName = "SelectScrollDownButton";
+
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue };

package/dist/select.css

@@ -0,0 +1,160 @@
+@charset "UTF-8";
+@layer components {
+  .lui-select-trigger {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+    width: fit-content;
+    height: var(--lui-select-trigger-height);
+    padding: var(--lui-select-trigger-py) var(--lui-select-trigger-px);
+    background-color: var(--lui-select-trigger-bg);
+    color: var(--lui-select-trigger-text);
+    border: 1px solid var(--lui-select-trigger-border);
+    border-radius: var(--lui-select-trigger-radius);
+    font-family: var(--lui-font-family);
+    font-size: 0.875rem;
+    line-height: 1.25;
+    white-space: nowrap;
+    text-align: left;
+    cursor: pointer;
+    transition: var(--lui-transition);
+    vertical-align: middle;
+    outline: none;
+    user-select: none;
+  }
+  .lui-select-trigger:focus-visible {
+    border-color: var(--lui-select-focus-border);
+    box-shadow: 0 0 0 2px var(--lui-surface), 0 0 0 4px var(--lui-select-focus-ring-color);
+  }
+  .lui-select-trigger:disabled, .lui-select-trigger[aria-disabled=true] {
+    opacity: var(--lui-disabled-opacity);
+    cursor: var(--lui-disabled-cursor);
+    pointer-events: none;
+  }
+  .lui-select-trigger--sm {
+    height: var(--lui-select-trigger-height-sm);
+    font-size: 0.8125rem;
+  }
+  .lui-select-trigger--full-width {
+    width: 100%;
+  }
+  .lui-select-trigger__chevron {
+    width: 1rem;
+    height: 1rem;
+    opacity: 0.5;
+    flex-shrink: 0;
+    pointer-events: none;
+  }
+  .lui-select-value {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 1;
+    min-width: 0;
+  }
+  .lui-select-value:empty::before {
+    content: "​";
+  }
+  .lui-select-content {
+    background-color: var(--lui-select-content-bg);
+    border: 1px solid var(--lui-select-content-border);
+    border-radius: var(--lui-select-content-radius);
+    box-shadow: var(--lui-select-content-shadow);
+    overflow: hidden;
+    animation: lui-select-fade-in 0.12s ease-out;
+  }
+  .lui-select-content__viewport {
+    overflow-y: auto;
+    max-height: var(--lui-select-content-max-height);
+    overscroll-behavior: contain;
+    padding: 0.25rem;
+    scroll-padding-block: 0.25rem;
+  }
+  @keyframes lui-select-fade-in {
+    from {
+      opacity: 0;
+      transform: scale(0.97);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+  .lui-select-label {
+    padding: 0.375rem 0.5rem 0.25rem;
+    font-size: 0.75rem;
+    font-weight: 500;
+    color: var(--lui-select-label-text);
+    user-select: none;
+    font-family: var(--lui-font-family);
+  }
+  .lui-select-item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    padding: var(--lui-select-item-py) var(--lui-select-item-px);
+    padding-right: calc(var(--lui-select-item-px) + var(--lui-select-item-indicator-size) + 0.375rem);
+    border-radius: var(--lui-select-item-radius);
+    font-size: 0.875rem;
+    color: var(--lui-select-item-text);
+    cursor: pointer;
+    user-select: none;
+    outline: none;
+    transition: background-color 0.1s ease, color 0.1s ease;
+    font-family: var(--lui-font-family);
+  }
+  .lui-select-item:hover:not(.lui-select-item--disabled) {
+    background-color: color-mix(in srgb, var(--lui-select-item-hover-bg) 50%, transparent);
+    color: var(--lui-select-item-hover-text);
+  }
+  .lui-select-item:focus-visible:not(.lui-select-item--disabled) {
+    background-color: var(--lui-select-item-focus-bg);
+    color: var(--lui-select-item-hover-text);
+  }
+  .lui-select-item--disabled {
+    opacity: var(--lui-disabled-opacity);
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+  .lui-select-item__indicator {
+    position: absolute;
+    right: var(--lui-select-item-px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--lui-select-item-indicator-size);
+    height: var(--lui-select-item-indicator-size);
+    flex-shrink: 0;
+  }
+  .lui-select-item__check {
+    width: 0.875rem;
+    height: 0.875rem;
+    color: var(--lui-select-item-selected-text);
+  }
+  .lui-select-item__text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 1;
+  }
+  .lui-select-separator {
+    border: none;
+    border-top: 1px solid var(--lui-select-separator-color);
+    margin: 0.25rem -0.25rem;
+  }
+  .lui-select-scroll-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.25rem;
+    cursor: default;
+    color: var(--lui-select-label-text);
+  }
+  .lui-select-scroll-button__icon {
+    width: 1rem;
+    height: 1rem;
+  }
+}

package/dist/select.d.ts

@@ -0,0 +1,119 @@
+import type { Ref } from "react";
+/** A single item entry for the data-driven `items` prop on `Select`. */
+export interface SelectItemData {
+    label: string;
+    /** Pass `null` for the "no selection" reset item (equivalent to `value=""`). */
+    value: string | null;
+}
+export interface SelectProps {
+    /** Controlled selected value. Pair with `onValueChange`. */
+    value?: string;
+    /** Uncontrolled initial selected value. */
+    defaultValue?: string;
+    /** Called when the user selects a different item. */
+    onValueChange?: (value: string) => void;
+    /** Disables the entire select control. */
+    disabled?: boolean;
+    children?: React.ReactNode;
+    /** Controlled open state. Pair with `onOpenChange`. */
+    open?: boolean;
+    /** Called when open state changes. */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Optional flat list of items for label extraction.
+     * Useful when items are rendered via `.map()` and the label map
+     * cannot be built from static JSX children alone.
+     * Supports `value: null` for the "no selection" reset item.
+     */
+    items?: SelectItemData[];
+}
+export declare function Select({ value: controlledValue, defaultValue, onValueChange, disabled, children, open: controlledOpen, onOpenChange, items, }: SelectProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Select {
+    var displayName: string;
+}
+export interface SelectTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    ref?: Ref<HTMLButtonElement>;
+    /** Size variant of the trigger button. */
+    size?: "sm" | "default";
+    /** When true, the trigger expands to fill its container width. */
+    fullWidth?: boolean;
+}
+export declare function SelectTrigger({ ref, className, children, size, fullWidth, disabled: propDisabled, onKeyDown, ...props }: SelectTriggerProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace SelectTrigger {
+    var displayName: string;
+}
+export interface SelectValueProps {
+    /** Text shown when no value is selected. */
+    placeholder?: string;
+    className?: string;
+}
+export declare function SelectValue({ placeholder, className }: SelectValueProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace SelectValue {
+    var displayName: string;
+}
+export interface SelectContentProps {
+    ref?: Ref<HTMLDivElement>;
+    className?: string;
+    children?: React.ReactNode;
+    /**
+     * Positioning strategy.
+     * - `"item-aligned"` (default): the dropdown opens so the selected item
+     *   is visually aligned with the trigger — matching Shadcn/Radix behaviour.
+     * - `"popper"`: the dropdown opens below (or above) the trigger.
+     */
+    position?: "item-aligned" | "popper";
+}
+export declare function SelectContent({ ref, className, children, position, }: SelectContentProps): import("react").ReactPortal | null;
+export declare namespace SelectContent {
+    var displayName: string;
+}
+export interface SelectGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function SelectGroup({ ref, className, children, ...props }: SelectGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace SelectGroup {
+    var displayName: string;
+}
+export interface SelectLabelProps extends React.HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function SelectLabel({ ref, className, children, ...props }: SelectLabelProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace SelectLabel {
+    var displayName: string;
+}
+export interface SelectItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+    /**
+     * The value this item represents when selected. Required.
+     * Pass `null` for the "no selection" reset item (Shadcn-style).
+     * Internally treated as `""` — `onValueChange` is called with `""`.
+     */
+    value: string | null;
+    /** Prevents selection of this item. */
+    disabled?: boolean;
+}
+export declare function SelectItem({ ref, className, children, value, disabled, onClick, onKeyDown, ...props }: SelectItemProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace SelectItem {
+    var displayName: string;
+}
+export interface SelectSeparatorProps extends React.HTMLAttributes<HTMLHRElement> {
+    ref?: Ref<HTMLHRElement>;
+}
+export declare function SelectSeparator({ ref, className, ...props }: SelectSeparatorProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace SelectSeparator {
+    var displayName: string;
+}
+export interface SelectScrollUpButtonProps extends React.HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function SelectScrollUpButton({ ref, className, ...props }: SelectScrollUpButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace SelectScrollUpButton {
+    var displayName: string;
+}
+export interface SelectScrollDownButtonProps extends React.HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function SelectScrollDownButton({ ref, className, ...props }: SelectScrollDownButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace SelectScrollDownButton {
+    var displayName: string;
+}

package/dist/select.vars.css

@@ -0,0 +1,28 @@
+:root {
+  --lui-select-trigger-bg: var(--lui-surface);
+  --lui-select-trigger-text: var(--lui-surface-text);
+  --lui-select-trigger-border: var(--lui-surface-border);
+  --lui-select-trigger-radius: var(--lui-radius-sm);
+  --lui-select-trigger-height: 2.25rem;
+  --lui-select-trigger-height-sm: 2rem;
+  --lui-select-trigger-px: 0.75rem;
+  --lui-select-trigger-py: 0.5rem;
+  --lui-select-focus-border: var(--lui-primary);
+  --lui-select-focus-ring-color: color-mix(in srgb, var(--lui-primary) 40%, transparent);
+  --lui-select-content-bg: var(--lui-surface);
+  --lui-select-content-border: var(--lui-surface-border);
+  --lui-select-content-radius: var(--lui-radius-sm);
+  --lui-select-content-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.08);
+  --lui-select-content-max-height: 20rem;
+  --lui-select-item-text: var(--lui-surface-text);
+  --lui-select-item-hover-bg: color-mix(in srgb, var(--lui-primary) 10%, transparent);
+  --lui-select-item-hover-text: var(--lui-surface-text);
+  --lui-select-item-selected-text: var(--lui-primary);
+  --lui-select-item-focus-bg: color-mix(in srgb, var(--lui-primary) 10%, transparent);
+  --lui-select-item-radius: var(--lui-radius-sm);
+  --lui-select-item-px: 0.5rem;
+  --lui-select-item-py: 0.375rem;
+  --lui-select-item-indicator-size: 1rem;
+  --lui-select-label-text: color-mix(in srgb, var(--lui-surface-text) 60%, transparent);
+  --lui-select-separator-color: var(--lui-surface-border);
+}

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "@ladder-ui/select",
+  "version": "0.2.0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./*.css": "./dist/*.css",
+    "./styles/*.css": "./dist/*.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "nodejs",
+    "react",
+    "ui",
+    "components",
+    "library",
+    "select",
+    "dropdown",
+    "form"
+  ],
+  "author": "Ivan Avila <ivelaval@gmail.com> - https://www.vennet.dev",
+  "license": "ISC",
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/ivelaval/ladder-ui.git"
+  },
+  "bugs": {
+    "url": "https://github.com/ivelaval/ladder-ui/issues"
+  },
+  "homepage": "https://github.com/ivelaval/ladder-ui#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "rollup": "^4.59.0",
+    "rollup-plugin-postcss": "^4.0.2",
+    "sass": "^1.90.0",
+    "tslib": "^2.6.2",
+    "typescript": "^5.3.3",
+    "@ladder-ui/core": "0.2.0"
+  },
+  "peerDependencies": {
+    "@ladder-ui/core": ">=0.0.0",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "scripts": {
+    "build": "pnpm clean && rollup -c",
+    "dev": "rollup -c -w",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "type-check": "tsc --noEmit",
+    "clean": "rm -rf dist"
+  }
+}