@ladder-ui/select 0.4.0 → 0.5.0

package/dist/index.js

@@ -1,191 +1 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var reactDom = require('react-dom');
-var core = require('@ladder-ui/core');
-var primitives = require('@ladder-ui/primitives');
-
-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" }) }));
-}
-// ─── Helper: Label Extraction ────────────────────────────────────────────────
-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;
-        // 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);
-        }
-        if (child.props.children) {
-            scanItemLabels(child.props.children, registry);
-        }
-    });
-}
-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({ 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";
-const SelectTrigger = react.forwardRef(({ className, size, status, fullWidth, children, ...props }, ref) => {
-    const ctx = react.use(SelectContext);
-    if (!ctx)
-        return null;
-    const setRefs = (el) => {
-        ctx.triggerRef.current = el;
-        if (typeof ref === "function")
-            ref(el);
-        else if (ref)
-            ref.current = el;
-    };
-    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";
-const SelectValue = ({ placeholder, className }) => {
-    const ctx = react.use(SelectContext);
-    return (jsxRuntime.jsx("span", { className: core.concatClassNames("lui-select-value", className), "data-slot": "select-value", children: ctx?.displayLabel || placeholder }));
-};
-SelectValue.displayName = "SelectValue";
-const SelectContent = react.forwardRef(({ children, className, ...props }, ref) => {
-    const ctx = react.use(SelectContext);
-    const contentRef = react.useRef(null);
-    const [coords, setCoords] = react.useState({ top: 0, left: 0, width: 0 });
-    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 viewportHeight = window.innerHeight;
-        // 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;
-        }
-        setCoords({ top, left, width: triggerRect.width });
-        setIsPositioned(true);
-    }, [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();
-            }
-            props.onKeyDown?.(e);
-        }, ...props, children: jsxRuntime.jsx("div", { className: "lui-select-content__viewport", children: children }) }), document.body);
-});
-SelectContent.displayName = "SelectContent";
-const SelectItem = react.forwardRef(({ value, children, disabled, className, ...props }, ref) => {
-    const ctx = react.use(SelectContext);
-    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";
-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";
-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";
-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;
-exports.SelectContent = SelectContent;
-exports.SelectGroup = SelectGroup;
-exports.SelectItem = SelectItem;
-exports.SelectLabel = SelectLabel;
-exports.SelectSeparator = SelectSeparator;
-exports.SelectTrigger = SelectTrigger;
-exports.SelectValue = SelectValue;
-exports.default = Select;
+"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,179 +1 @@
-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 { cva, concatClassNames } from '@ladder-ui/core';
-import { useOutsideClick, useSelect } from '@ladder-ui/primitives';
-
-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" }) }));
-}
-// ─── Helper: Label Extraction ────────────────────────────────────────────────
-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;
-        // 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);
-        }
-        if (child.props.children) {
-            scanItemLabels(child.props.children, registry);
-        }
-    });
-}
-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({ 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";
-const SelectTrigger = forwardRef(({ className, size, status, fullWidth, children, ...props }, ref) => {
-    const ctx = use(SelectContext);
-    if (!ctx)
-        return null;
-    const setRefs = (el) => {
-        ctx.triggerRef.current = el;
-        if (typeof ref === "function")
-            ref(el);
-        else if (ref)
-            ref.current = el;
-    };
-    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";
-const SelectValue = ({ placeholder, className }) => {
-    const ctx = use(SelectContext);
-    return (jsx("span", { className: concatClassNames("lui-select-value", className), "data-slot": "select-value", children: ctx?.displayLabel || placeholder }));
-};
-SelectValue.displayName = "SelectValue";
-const SelectContent = forwardRef(({ children, className, ...props }, ref) => {
-    const ctx = use(SelectContext);
-    const contentRef = useRef(null);
-    const [coords, setCoords] = useState({ top: 0, left: 0, width: 0 });
-    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 viewportHeight = window.innerHeight;
-        // 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;
-        }
-        setCoords({ top, left, width: triggerRect.width });
-        setIsPositioned(true);
-    }, [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();
-            }
-            props.onKeyDown?.(e);
-        }, ...props, children: jsx("div", { className: "lui-select-content__viewport", children: children }) }), document.body);
-});
-SelectContent.displayName = "SelectContent";
-const SelectItem = forwardRef(({ value, children, disabled, className, ...props }, ref) => {
-    const ctx = use(SelectContext);
-    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";
-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";
-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";
-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, SelectSeparator, SelectTrigger, SelectValue, Select as default };
+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,147 +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-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);
-    cursor: var(--lui-disabled-cursor);
-    pointer-events: none;
-  }
-  .lui-select-trigger--sm {
-    height: var(--lui-select-trigger-height-sm);
-    font-size: 0.8125rem;
-  }
-  .lui-select-trigger--full-width {
-    width: 100%;
-  }
-  .lui-select-trigger__chevron {
-    width: 1rem;
-    height: 1rem;
-    opacity: 0.5;
-    flex-shrink: 0;
-    pointer-events: none;
-  }
-  .lui-select-value {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    flex: 1;
-    min-width: 0;
-  }
-  .lui-select-value:empty::before {
-    content: "​";
-  }
-  .lui-select-content {
-    background-color: var(--lui-select-content-bg);
-    border: 1px solid var(--lui-select-content-border);
-    border-radius: var(--lui-select-content-radius);
-    box-shadow: var(--lui-select-content-shadow);
-    overflow: hidden;
-    animation: lui-select-fade-in 0.12s ease-out;
-  }
-  .lui-select-content__viewport {
-    overflow-y: auto;
-    max-height: var(--lui-select-content-max-height);
-    overscroll-behavior: contain;
-    padding: 0.25rem;
-    scroll-padding-block: 0.25rem;
-  }
-  @keyframes lui-select-fade-in {
-    from {
-      opacity: 0;
-      transform: scale(0.97);
-    }
-    to {
-      opacity: 1;
-      transform: scale(1);
-    }
-  }
-  .lui-select-label {
-    padding: 0.375rem 0.5rem 0.25rem;
-    font-size: 0.75rem;
-    font-weight: 500;
-    color: var(--lui-select-label-text);
-    user-select: none;
-    font-family: var(--lui-font-family);
-  }
-  .lui-select-item {
-    position: relative;
-    display: flex;
-    align-items: center;
-    gap: 0.375rem;
-    padding: var(--lui-select-item-py) var(--lui-select-item-px);
-    padding-right: calc(var(--lui-select-item-px) + var(--lui-select-item-indicator-size) + 0.375rem);
-    border-radius: var(--lui-select-item-radius);
-    font-size: 0.875rem;
-    color: var(--lui-select-item-text);
-    cursor: pointer;
-    user-select: none;
-    outline: none;
-    transition: background-color 0.1s ease, color 0.1s ease;
-    font-family: var(--lui-font-family);
-  }
-  .lui-select-item:hover:not(.lui-select-item--disabled) {
-    background-color: 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 {
-    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;
-  }
-}
+@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.vars.css

@@ -1,28 +1 @@
-: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, 0.12), 0 1px 4px rgba(0, 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);
-}
+: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.4.0",
+  "version": "0.5.0",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -26,9 +26,9 @@
     "sass": "^1.90.0",
     "tslib": "^2.6.2",
     "typescript": "^5.3.3",
-    "@ladder-ui/primitives": "0.4.0",
-    "@ladder-ui/layout": "0.4.0",
-    "@ladder-ui/core": "0.4.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",