@ladder-ui/select 0.3.0 → 0.4.0

package/dist/index.d.ts

@@ -1,2 +1,3 @@
-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";
+export { Select, SelectTrigger, SelectValue, SelectContent, SelectItem, SelectGroup, SelectLabel, SelectSeparator, } from "./select";
+export type { SelectProps, SelectTriggerProps, SelectValueProps, SelectItemProps, } from "./select";
+export { Select as default } from "./select";

package/dist/index.js

@@ -1,30 +1,22 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var reactDom = require('react-dom');
-var concatClassNames = require('@ladder-ui/core/concatClassNames');
+var core = require('@ladder-ui/core');
+var primitives = require('@ladder-ui/primitives');
 
-// useLayoutEffect runs synchronously after DOM mutations but before the browser
-// paints. This eliminates the double-paint flash that useEffect causes for
-// position-critical work like dropdown placement.
-// Falls back to useEffect in SSR environments (no DOM = no layout to measure).
 const useIsomorphicLayoutEffect = typeof window !== "undefined" ? react.useLayoutEffect : react.useEffect;
-// ─── 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" }) }));
+// ─── Icons ──────────────────────────────────────────────────────────────────
+function ChevronDownIcon({ className, style }) {
+    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, style: style, children: jsxRuntime.jsx("path", { d: "m6 9 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.
+// ─── Helper: Label Extraction ────────────────────────────────────────────────
 function extractTextContent(children) {
     if (typeof children === "string")
         return children;
@@ -32,303 +24,160 @@ function extractTextContent(children) {
         return String(children);
     if (Array.isArray(children))
         return children.map(extractTextContent).join("");
-    if (react.isValidElement(children)) {
+    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);
+        // Check for SelectItem based on type or name
+        const type = child.type;
+        const dn = type.displayName || type.name;
+        if (dn === "SelectItem") {
+            const key = child.props.value ?? "";
+            const label = extractTextContent(child.props.children);
             if (label)
                 registry.set(key, label);
         }
-        // Recurse into children of non-item elements
-        if (props.children) {
-            scanItemLabels(props.children, registry);
+        if (child.props.children) {
+            scanItemLabels(child.props.children, registry);
         }
     });
 }
-const SelectContext = react.createContext({
-    open: false,
-    setOpen: () => { },
-    value: undefined,
-    displayLabel: "",
-    triggerId: "",
-    contentId: "",
-    triggerRef: { current: null },
+const SelectContext = react.createContext(null);
+// ─── Variants ────────────────────────────────────────────────────────────────
+const selectTriggerVariants = core.cva({
+    base: "lui-select-trigger",
+    variants: {
+        size: { sm: "lui-select-trigger--sm", md: "lui-select-trigger--md" },
+        status: { default: "", error: "lui-select-trigger--error" },
+        fullWidth: { true: "lui-select-trigger--full-width" },
+    },
+    defaultVariants: { size: "md", status: "default" },
 });
-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 }));
+function Select({ children, items, ...props }) {
+    const select = primitives.useSelect(props);
+    const labelsMap = react.useMemo(() => {
+        const map = new Map();
+        // 1. Scan children (Static JSX)
+        scanItemLabels(children, map);
+        // 2. Add explicit items (Dynamic/SDUI)
+        items?.forEach(item => map.set(item.value, item.label));
+        return map;
+    }, [children, items]);
+    const displayLabel = (select.value !== undefined ? labelsMap.get(select.value) : undefined) ?? "";
+    return (jsxRuntime.jsx(SelectContext, { value: { ...select, displayLabel }, children: children }));
 }
 Select.displayName = "Select";
-function SelectTrigger({ ref, className, children, size = "default", fullWidth, disabled: propDisabled, onKeyDown, ...props }) {
+const SelectTrigger = react.forwardRef(({ className, size, status, fullWidth, children, ...props }, ref) => {
     const ctx = react.use(SelectContext);
-    const isDisabled = propDisabled || ctx.disabled;
-    // Merge consumer ref + context triggerRef
-    const setRef = (el) => {
+    if (!ctx)
+        return null;
+    const setRefs = (el) => {
         ctx.triggerRef.current = el;
-        if (typeof ref === "function") {
+        if (typeof ref === "function")
             ref(el);
-        }
-        else if (ref) {
+        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" })] }));
-}
+    return (jsxRuntime.jsxs("button", { ref: setRefs, type: "button", role: "combobox", id: ctx.triggerId, "aria-expanded": ctx.open, "aria-haspopup": "listbox", "aria-controls": ctx.open ? ctx.contentId : undefined, disabled: ctx.disabled, className: selectTriggerVariants({ size, status, fullWidth, className }), onClick: (e) => {
+            ctx.setOpen(!ctx.open);
+            props.onClick?.(e);
+        }, onKeyDown: (e) => {
+            if (e.key === "Escape" && ctx.open) {
+                e.preventDefault();
+                ctx.setOpen(false);
+            }
+            if ((e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") && !ctx.open) {
+                e.preventDefault();
+                ctx.setOpen(true);
+            }
+            props.onKeyDown?.(e);
+        }, ...props, children: [children, jsxRuntime.jsx(ChevronDownIcon, { className: "lui-select-trigger__chevron" })] }));
+});
 SelectTrigger.displayName = "SelectTrigger";
-function SelectValue({ placeholder, className }) {
+const 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 || "" }));
-}
+    return (jsxRuntime.jsx("span", { className: core.concatClassNames("lui-select-value", className), "data-slot": "select-value", children: ctx?.displayLabel || placeholder }));
+};
 SelectValue.displayName = "SelectValue";
-function SelectContent({ ref, className, children, position = "item-aligned", }) {
+const SelectContent = react.forwardRef(({ children, className, ...props }, ref) => {
     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 synchronously before browser paint
+    const [isPositioned, setIsPositioned] = react.useState(false);
+    const { addRef } = primitives.useOutsideClick(() => ctx?.setOpen(false), ctx?.open);
+    // Two-pass positioning strategy
     useIsomorphicLayoutEffect(() => {
-        if (!ctx.open || !contentRef.current || !ctx.triggerRef.current)
+        if (!ctx?.open || !ctx.triggerRef.current || !contentRef.current) {
+            setIsPositioned(false);
             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;
-            }
+        // Popper strategy: open below trigger
+        let top = triggerRect.bottom + window.scrollY + 4;
+        const left = triggerRect.left + window.scrollX;
+        // Flip if no space below
+        if (triggerRect.bottom + contentHeight + 8 > viewportHeight) {
+            top = triggerRect.top + window.scrollY - contentHeight - 4;
         }
-        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?.open]);
+    if (!ctx?.open)
+        return null;
+    return reactDom.createPortal(jsxRuntime.jsx("div", { ref: (node) => {
+            contentRef.current = node;
+            if (typeof ref === "function")
+                ref(node);
+            else if (ref)
+                ref.current = node;
+            if (node)
+                addRef({ current: node });
+            addRef(ctx.triggerRef);
+        }, id: ctx.contentId, role: "listbox", "aria-labelledby": ctx.triggerId, "data-slot": "select-content", className: core.concatClassNames("lui-select-content", className), style: {
+            position: "absolute",
+            top: coords.top,
+            left: coords.left,
+            width: coords.width,
+            minWidth: coords.width,
+            zIndex: 9999,
+            visibility: isPositioned ? "visible" : "hidden",
+        }, onKeyDown: (e) => {
+            if (e.key === "Escape") {
                 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);
-}
+            props.onKeyDown?.(e);
+        }, ...props, 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 SelectItem = react.forwardRef(({ value, children, disabled, className, ...props }, ref) => {
     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 })] }));
-}
+    const isSelected = ctx?.value === value;
+    return (jsxRuntime.jsxs("div", { ref: ref, role: "option", "aria-selected": isSelected, "aria-disabled": disabled, className: core.concatClassNames("lui-select-item", isSelected && "lui-select-item--selected", disabled && "lui-select-item--disabled", className), onClick: (e) => {
+            if (!disabled) {
+                ctx?.onValueChange(value === null ? "" : value);
+                ctx?.setOpen(false);
+            }
+            props.onClick?.(e);
+        }, ...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 }));
-}
+const SelectGroup = react.forwardRef(({ className, ...props }, ref) => (jsxRuntime.jsx("div", { ref: ref, role: "group", className: core.concatClassNames("lui-select-group", className), ...props })));
+SelectGroup.displayName = "SelectGroup";
+const SelectLabel = react.forwardRef(({ className, ...props }, ref) => (jsxRuntime.jsx("div", { ref: ref, className: core.concatClassNames("lui-select-label", className), ...props })));
+SelectLabel.displayName = "SelectLabel";
+const SelectSeparator = react.forwardRef(({ className, ...props }, ref) => (jsxRuntime.jsx("hr", { ref: ref, className: core.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" }) }));
-}
+const SelectScrollUpButton = react.forwardRef(({ className, ...props }, ref) => (jsxRuntime.jsx("div", { ref: ref, className: core.concatClassNames("lui-select-scroll-button", className), "aria-hidden": "true", ...props, children: jsxRuntime.jsx(ChevronDownIcon, { className: "lui-select-scroll-button__icon", style: { transform: "rotate(180deg)" } }) })));
 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" }) }));
-}
+const SelectScrollDownButton = react.forwardRef(({ className, ...props }, ref) => (jsxRuntime.jsx("div", { ref: ref, className: core.concatClassNames("lui-select-scroll-button", className), "aria-hidden": "true", ...props, children: jsxRuntime.jsx(ChevronDownIcon, { className: "lui-select-scroll-button__icon" }) })));
 SelectScrollDownButton.displayName = "SelectScrollDownButton";
 
 exports.Select = Select;
@@ -336,8 +185,7 @@ 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;
+exports.default = Select;

package/dist/index.mjs

@@ -1,28 +1,18 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { createContext, useState, useId, useRef, useCallback, use, useEffect, Children, isValidElement, useLayoutEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { createContext, forwardRef, use, useRef, useState, useLayoutEffect, useEffect, useMemo, Children, isValidElement } from 'react';
 import { createPortal } from 'react-dom';
-import concatClassNames from '@ladder-ui/core/concatClassNames';
+import { cva, concatClassNames } from '@ladder-ui/core';
+import { useOutsideClick, useSelect } from '@ladder-ui/primitives';
 
-// useLayoutEffect runs synchronously after DOM mutations but before the browser
-// paints. This eliminates the double-paint flash that useEffect causes for
-// position-critical work like dropdown placement.
-// Falls back to useEffect in SSR environments (no DOM = no layout to measure).
 const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
-// ─── 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" }) }));
+// ─── Icons ──────────────────────────────────────────────────────────────────
+function ChevronDownIcon({ className, style }) {
+    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, style: style, children: jsx("path", { d: "m6 9 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.
+// ─── Helper: Label Extraction ────────────────────────────────────────────────
 function extractTextContent(children) {
     if (typeof children === "string")
         return children;
@@ -30,303 +20,160 @@ function extractTextContent(children) {
         return String(children);
     if (Array.isArray(children))
         return children.map(extractTextContent).join("");
-    if (isValidElement(children)) {
+    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);
+        // Check for SelectItem based on type or name
+        const type = child.type;
+        const dn = type.displayName || type.name;
+        if (dn === "SelectItem") {
+            const key = child.props.value ?? "";
+            const label = extractTextContent(child.props.children);
             if (label)
                 registry.set(key, label);
         }
-        // Recurse into children of non-item elements
-        if (props.children) {
-            scanItemLabels(props.children, registry);
+        if (child.props.children) {
+            scanItemLabels(child.props.children, registry);
         }
     });
 }
-const SelectContext = createContext({
-    open: false,
-    setOpen: () => { },
-    value: undefined,
-    displayLabel: "",
-    triggerId: "",
-    contentId: "",
-    triggerRef: { current: null },
+const SelectContext = createContext(null);
+// ─── Variants ────────────────────────────────────────────────────────────────
+const selectTriggerVariants = cva({
+    base: "lui-select-trigger",
+    variants: {
+        size: { sm: "lui-select-trigger--sm", md: "lui-select-trigger--md" },
+        status: { default: "", error: "lui-select-trigger--error" },
+        fullWidth: { true: "lui-select-trigger--full-width" },
+    },
+    defaultVariants: { size: "md", status: "default" },
 });
-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 }));
+function Select({ children, items, ...props }) {
+    const select = useSelect(props);
+    const labelsMap = useMemo(() => {
+        const map = new Map();
+        // 1. Scan children (Static JSX)
+        scanItemLabels(children, map);
+        // 2. Add explicit items (Dynamic/SDUI)
+        items?.forEach(item => map.set(item.value, item.label));
+        return map;
+    }, [children, items]);
+    const displayLabel = (select.value !== undefined ? labelsMap.get(select.value) : undefined) ?? "";
+    return (jsx(SelectContext, { value: { ...select, displayLabel }, children: children }));
 }
 Select.displayName = "Select";
-function SelectTrigger({ ref, className, children, size = "default", fullWidth, disabled: propDisabled, onKeyDown, ...props }) {
+const SelectTrigger = forwardRef(({ className, size, status, fullWidth, children, ...props }, ref) => {
     const ctx = use(SelectContext);
-    const isDisabled = propDisabled || ctx.disabled;
-    // Merge consumer ref + context triggerRef
-    const setRef = (el) => {
+    if (!ctx)
+        return null;
+    const setRefs = (el) => {
         ctx.triggerRef.current = el;
-        if (typeof ref === "function") {
+        if (typeof ref === "function")
             ref(el);
-        }
-        else if (ref) {
+        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" })] }));
-}
+    return (jsxs("button", { ref: setRefs, type: "button", role: "combobox", id: ctx.triggerId, "aria-expanded": ctx.open, "aria-haspopup": "listbox", "aria-controls": ctx.open ? ctx.contentId : undefined, disabled: ctx.disabled, className: selectTriggerVariants({ size, status, fullWidth, className }), onClick: (e) => {
+            ctx.setOpen(!ctx.open);
+            props.onClick?.(e);
+        }, onKeyDown: (e) => {
+            if (e.key === "Escape" && ctx.open) {
+                e.preventDefault();
+                ctx.setOpen(false);
+            }
+            if ((e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") && !ctx.open) {
+                e.preventDefault();
+                ctx.setOpen(true);
+            }
+            props.onKeyDown?.(e);
+        }, ...props, children: [children, jsx(ChevronDownIcon, { className: "lui-select-trigger__chevron" })] }));
+});
 SelectTrigger.displayName = "SelectTrigger";
-function SelectValue({ placeholder, className }) {
+const 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 || "" }));
-}
+    return (jsx("span", { className: concatClassNames("lui-select-value", className), "data-slot": "select-value", children: ctx?.displayLabel || placeholder }));
+};
 SelectValue.displayName = "SelectValue";
-function SelectContent({ ref, className, children, position = "item-aligned", }) {
+const SelectContent = forwardRef(({ children, className, ...props }, ref) => {
     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 synchronously before browser paint
+    const [isPositioned, setIsPositioned] = useState(false);
+    const { addRef } = useOutsideClick(() => ctx?.setOpen(false), ctx?.open);
+    // Two-pass positioning strategy
     useIsomorphicLayoutEffect(() => {
-        if (!ctx.open || !contentRef.current || !ctx.triggerRef.current)
+        if (!ctx?.open || !ctx.triggerRef.current || !contentRef.current) {
+            setIsPositioned(false);
             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;
-            }
+        // Popper strategy: open below trigger
+        let top = triggerRect.bottom + window.scrollY + 4;
+        const left = triggerRect.left + window.scrollX;
+        // Flip if no space below
+        if (triggerRect.bottom + contentHeight + 8 > viewportHeight) {
+            top = triggerRect.top + window.scrollY - contentHeight - 4;
         }
-        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?.open]);
+    if (!ctx?.open)
+        return null;
+    return createPortal(jsx("div", { ref: (node) => {
+            contentRef.current = node;
+            if (typeof ref === "function")
+                ref(node);
+            else if (ref)
+                ref.current = node;
+            if (node)
+                addRef({ current: node });
+            addRef(ctx.triggerRef);
+        }, id: ctx.contentId, role: "listbox", "aria-labelledby": ctx.triggerId, "data-slot": "select-content", className: concatClassNames("lui-select-content", className), style: {
+            position: "absolute",
+            top: coords.top,
+            left: coords.left,
+            width: coords.width,
+            minWidth: coords.width,
+            zIndex: 9999,
+            visibility: isPositioned ? "visible" : "hidden",
+        }, onKeyDown: (e) => {
+            if (e.key === "Escape") {
                 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);
-}
+            props.onKeyDown?.(e);
+        }, ...props, 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 SelectItem = forwardRef(({ value, children, disabled, className, ...props }, ref) => {
     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 })] }));
-}
+    const isSelected = ctx?.value === value;
+    return (jsxs("div", { ref: ref, role: "option", "aria-selected": isSelected, "aria-disabled": disabled, className: concatClassNames("lui-select-item", isSelected && "lui-select-item--selected", disabled && "lui-select-item--disabled", className), onClick: (e) => {
+            if (!disabled) {
+                ctx?.onValueChange(value === null ? "" : value);
+                ctx?.setOpen(false);
+            }
+            props.onClick?.(e);
+        }, ...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 }));
-}
+const SelectGroup = forwardRef(({ className, ...props }, ref) => (jsx("div", { ref: ref, role: "group", className: concatClassNames("lui-select-group", className), ...props })));
+SelectGroup.displayName = "SelectGroup";
+const SelectLabel = forwardRef(({ className, ...props }, ref) => (jsx("div", { ref: ref, className: concatClassNames("lui-select-label", className), ...props })));
+SelectLabel.displayName = "SelectLabel";
+const SelectSeparator = forwardRef(({ className, ...props }, ref) => (jsx("hr", { ref: ref, 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" }) }));
-}
+const SelectScrollUpButton = forwardRef(({ className, ...props }, ref) => (jsx("div", { ref: ref, className: concatClassNames("lui-select-scroll-button", className), "aria-hidden": "true", ...props, children: jsx(ChevronDownIcon, { className: "lui-select-scroll-button__icon", style: { transform: "rotate(180deg)" } }) })));
 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" }) }));
-}
+const SelectScrollDownButton = forwardRef(({ className, ...props }, ref) => (jsx("div", { ref: ref, className: concatClassNames("lui-select-scroll-button", className), "aria-hidden": "true", ...props, children: jsx(ChevronDownIcon, { className: "lui-select-scroll-button__icon" }) })));
 SelectScrollDownButton.displayName = "SelectScrollDownButton";
 
-export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue };
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, Select as default };

package/dist/select.css

@@ -26,7 +26,7 @@
   }
   .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);
+    box-shadow: 0 0 0 2px var(--lui-bg-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);
@@ -91,8 +91,6 @@
     font-family: var(--lui-font-family);
   }
   .lui-select-item {
-    content-visibility: auto;
-    contain-intrinsic-size: auto 36px;
     position: relative;
     display: flex;
     align-items: center;
@@ -109,12 +107,11 @@
     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);
+    background-color: var(--lui-select-item-hover-bg);
     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--selected {
+    color: var(--lui-select-item-selected-text);
   }
   .lui-select-item--disabled {
     opacity: var(--lui-disabled-opacity);
@@ -147,16 +144,4 @@
     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

@@ -1,119 +1,62 @@
-import type { Ref } from "react";
-/** A single item entry for the data-driven `items` prop on `Select`. */
+import type { Ref, HTMLAttributes, ReactNode } from "react";
+import { type VariantProps } from "@ladder-ui/core";
+declare const selectTriggerVariants: (props?: (import("packages/core/dist/cva").ConfigVariants<{
+    size: {
+        sm: string;
+        md: string;
+    };
+    status: {
+        default: string;
+        error: string;
+    };
+    fullWidth: {
+        true: string;
+    };
+}> & {
+    className?: string;
+}) | undefined) => string;
 export interface SelectItemData {
     label: string;
-    /** Pass `null` for the "no selection" reset item (equivalent to `value=""`). */
-    value: string | null;
+    value: string;
 }
 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.
-     */
+    disabled?: boolean;
+    children?: ReactNode;
     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 function Select({ children, items, ...props }: SelectProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Select {
     var displayName: string;
 }
-export interface SelectTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+export interface SelectTriggerProps extends Omit<HTMLAttributes<HTMLButtonElement>, "size">, VariantProps<typeof selectTriggerVariants> {
     ref?: Ref<HTMLButtonElement>;
-    /** Size variant of the trigger button. */
-    size?: "sm" | "default";
-    /** When true, the trigger expands to fill its container width. */
+    size?: "sm" | "md";
+    status?: "default" | "error";
     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 declare const SelectTrigger: import("react").ForwardRefExoticComponent<Omit<SelectTriggerProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
 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. */
+export declare const SelectValue: {
+    ({ placeholder, className }: SelectValueProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export declare const SelectContent: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export interface SelectItemProps extends Omit<HTMLAttributes<HTMLDivElement>, "value"> {
+    value: string;
     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;
-}
+export declare const SelectItem: import("react").ForwardRefExoticComponent<SelectItemProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SelectGroup: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SelectLabel: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SelectSeparator: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLHRElement> & import("react").RefAttributes<HTMLHRElement>>;
+export declare const SelectScrollUpButton: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SelectScrollDownButton: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist/select.vars.css

@@ -1,28 +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-bg: var(--lui-bg-surface);
+  --lui-select-trigger-text: var(--lui-text-primary);
+  --lui-select-trigger-border: var(--lui-border-default);
   --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-focus-border: var(--lui-bg-interactive);
+  --lui-select-focus-ring-color: color-mix(in srgb, var(--lui-bg-interactive) 40%, transparent);
+  --lui-select-content-bg: var(--lui-bg-surface);
+  --lui-select-content-border: var(--lui-border-default);
   --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-text: var(--lui-text-primary);
+  --lui-select-item-hover-bg: color-mix(in srgb, var(--lui-bg-interactive) 10%, transparent);
+  --lui-select-item-hover-text: var(--lui-text-primary);
+  --lui-select-item-selected-text: var(--lui-bg-interactive);
+  --lui-select-item-focus-bg: color-mix(in srgb, var(--lui-bg-interactive) 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);
+  --lui-select-label-text: color-mix(in srgb, var(--lui-text-primary) 60%, transparent);
+  --lui-select-separator-color: var(--lui-border-default);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ladder-ui/select",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -17,48 +17,31 @@
   "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",
+    "@types/react-dom": "^19.2.3",
     "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.3.0"
+    "@ladder-ui/primitives": "0.4.0",
+    "@ladder-ui/layout": "0.4.0",
+    "@ladder-ui/core": "0.4.0"
   },
   "peerDependencies": {
     "@ladder-ui/core": ">=0.0.0",
-    "react": ">=18.0.0",
-    "react-dom": ">=18.0.0"
+    "react": ">=18.0.0"
   },
   "sideEffects": [
     "**/*.css"
   ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ivelaval/ladder-ui.git",
+    "directory": "packages/select"
+  },
   "scripts": {
     "build": "pnpm clean && rollup -c",
     "dev": "rollup -c -w",