npm - @ladder-ui/select - Versions diffs - 0.2.0 → 0.4.0 - Mend

@ladder-ui/select 0.2.0 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/dist/index.d.ts CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -1,25 +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');
-// ─── 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" }) }));
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? react.useLayoutEffect : react.useEffect;
+// ─── 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;
@@ -27,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 after first render
-    react.useEffect(() => {
-        if (!ctx.open || !contentRef.current || !ctx.triggerRef.current)
+    const [isPositioned, setIsPositioned] = react.useState(false);
+    const { addRef } = primitives.useOutsideClick(() => ctx?.setOpen(false), ctx?.open);
+    // Two-pass positioning strategy
+    useIsomorphicLayoutEffect(() => {
+        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;
@@ -331,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 CHANGED Viewed

@@ -1,23 +1,18 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { createContext, useState, useId, useRef, useCallback, use, useEffect, Children, isValidElement } 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';
-// ─── 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" }) }));
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+// ─── 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;
@@ -25,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 after first render
-    useEffect(() => {
-        if (!ctx.open || !contentRef.current || !ctx.triggerRef.current)
+    const [isPositioned, setIsPositioned] = useState(false);
+    const { addRef } = useOutsideClick(() => ctx?.setOpen(false), ctx?.open);
+    // Two-pass positioning strategy
+    useIsomorphicLayoutEffect(() => {
+        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 CHANGED Viewed

@@ -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);
@@ -107,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);
@@ -145,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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@ladder-ui/select",
-  "version": "0.2.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.2.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",