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

package/dist/index.mjs

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

package/dist/select.css

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

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 @@
-:root {
-  --lui-select-trigger-bg: var(--lui-surface);
-  --lui-select-trigger-text: var(--lui-surface-text);
-  --lui-select-trigger-border: var(--lui-surface-border);
-  --lui-select-trigger-radius: var(--lui-radius-sm);
-  --lui-select-trigger-height: 2.25rem;
-  --lui-select-trigger-height-sm: 2rem;
-  --lui-select-trigger-px: 0.75rem;
-  --lui-select-trigger-py: 0.5rem;
-  --lui-select-focus-border: var(--lui-primary);
-  --lui-select-focus-ring-color: color-mix(in srgb, var(--lui-primary) 40%, transparent);
-  --lui-select-content-bg: var(--lui-surface);
-  --lui-select-content-border: var(--lui-surface-border);
-  --lui-select-content-radius: var(--lui-radius-sm);
-  --lui-select-content-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.08);
-  --lui-select-content-max-height: 20rem;
-  --lui-select-item-text: var(--lui-surface-text);
-  --lui-select-item-hover-bg: color-mix(in srgb, var(--lui-primary) 10%, transparent);
-  --lui-select-item-hover-text: var(--lui-surface-text);
-  --lui-select-item-selected-text: var(--lui-primary);
-  --lui-select-item-focus-bg: color-mix(in srgb, var(--lui-primary) 10%, transparent);
-  --lui-select-item-radius: var(--lui-radius-sm);
-  --lui-select-item-px: 0.5rem;
-  --lui-select-item-py: 0.375rem;
-  --lui-select-item-indicator-size: 1rem;
-  --lui-select-label-text: color-mix(in srgb, var(--lui-surface-text) 60%, transparent);
-  --lui-select-separator-color: var(--lui-surface-border);
-}
+:root{--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-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,.12),0 1px 4px rgba(0,0,0,.08);--lui-select-content-max-height:20rem;--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-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.5.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/core": "0.5.0",
+    "@ladder-ui/layout": "0.5.0",
+    "@ladder-ui/primitives": "0.5.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",