@skdx/react 0.26.0

package/dist/segmented-control/types.d.ts

@@ -0,0 +1,73 @@
+import type * as React from 'react';
+import type { PrimitivePropsWithRef } from '../utils/primitive.js';
+/** Layout axis of a {@link SegmentedControl}. Unlike a roving-focus `Orientation` there is no `'both'`: a segmented control is a strip, and a strip has one axis. */
+export type SegmentedControlOrientation = 'horizontal' | 'vertical';
+/**
+ * @internal Geometry of the checked segment, relative to the root's padding
+ * box, published by {@link SegmentedControlIndicator} as CSS custom properties.
+ * Not part of the public API.
+ */
+export interface SegmentedControlRect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+/** @internal Shared state distributed from {@link SegmentedControl} to its parts via context. Not part of the public API. */
+export interface SegmentedControlContextValue {
+    value: string | undefined;
+    orientation: SegmentedControlOrientation;
+    disabled: boolean;
+    /** Fallback single tab stop when nothing is selected yet. */
+    firstEnabledValue: string | null;
+    onValueChange: (value: string) => void;
+    /** The root element, so the indicator can measure the checked item against it. */
+    rootRef: React.RefObject<HTMLDivElement | null>;
+}
+/** Props for the {@link SegmentedControl} root. */
+export interface SegmentedControlProps extends PrimitivePropsWithRef<'div'> {
+    /**
+     * Selected segment's value, for controlled usage. Pair with `onValueChange`.
+     * @default undefined — uncontrolled, tracks its own selection internally.
+     */
+    value?: string;
+    /**
+     * Initially selected segment's value, for uncontrolled usage.
+     * @default undefined — nothing is selected, so the first enabled segment
+     * carries the tab stop and the indicator publishes no geometry.
+     */
+    defaultValue?: string;
+    /**
+     * Fires with the new value whenever the selected segment changes, controlled
+     * or not — including when an arrow key moves focus, since focus selects here.
+     * @default undefined — no-op if omitted.
+     */
+    onValueChange?: (value: string) => void;
+    /**
+     * Layout axis, exposed as `data-orientation` and `aria-orientation`, and the
+     * axis arrow keys navigate along. `'vertical'` also makes the indicator
+     * publish `--skdx-segmented-control-y` / `--skdx-segmented-control-height`.
+     * @default 'horizontal' — Left/Right navigate, and the indicator publishes
+     * only the x/width pair.
+     */
+    orientation?: SegmentedControlOrientation;
+    /**
+     * Disables every segment, blocking selection and taking the whole control out
+     * of the tab order.
+     * @default false
+     */
+    disabled?: boolean;
+}
+/** Props for a single {@link SegmentedControlItem}. */
+export interface SegmentedControlItemProps extends PrimitivePropsWithRef<'button'> {
+    /** Unique identifier compared against the group's selected value. */
+    value: string;
+}
+/**
+ * Props for {@link SegmentedControlIndicator}, the element that slides behind
+ * the selected item. It reads the group's measured geometry from context and
+ * publishes it as CSS custom properties, so the movement itself is one CSS
+ * transition you write rather than any animation this library owns.
+ */
+export interface SegmentedControlIndicatorProps extends PrimitivePropsWithRef<'div'> {
+}

package/dist/select/Select.cjs

@@ -0,0 +1 @@
+"use strict";var pt=Object.create;var w=Object.defineProperty;var mt=Object.getOwnPropertyDescriptor;var ft=Object.getOwnPropertyNames;var dt=Object.getPrototypeOf,ut=Object.prototype.hasOwnProperty;var St=(e,o)=>{for(var t in o)w(e,t,{get:o[t],enumerable:!0})},te=(e,o,t,r)=>{if(o&&typeof o=="object"||typeof o=="function")for(let c of ft(o))!ut.call(e,c)&&c!==t&&w(e,c,{get:()=>o[c],enumerable:!(r=mt(o,c))||r.enumerable});return e};var u=(e,o,t)=>(t=e!=null?pt(dt(e)):{},te(o||!e||!e.__esModule?w(t,"default",{value:e,enumerable:!0}):t,e)),Pt=e=>te(w({},"__esModule",{value:!0}),e);var yt={};St(yt,{Select:()=>ie,SelectContent:()=>B,SelectGroup:()=>Q,SelectIcon:()=>G,SelectItem:()=>_,SelectItemIndicator:()=>J,SelectItemText:()=>z,SelectLabel:()=>X,SelectPortal:()=>F,SelectProvider:()=>se,SelectSeparator:()=>Y,SelectTrigger:()=>K,SelectValue:()=>A,SelectViewport:()=>U,useSelectContext:()=>S});module.exports=Pt(yt);var i=u(require("react"),1),oe=require("../utils/createContext.cjs"),L=require("../utils/formControl.cjs"),re=require("../utils/hiddenInput.cjs"),le=require("../utils/popper.cjs"),ne=require("../utils/useControllableState.cjs"),ae=require("../utils/useOpenChangeComplete.cjs"),ce=require("../utils/useSelection.cjs"),h=require("react/jsx-runtime"),[se,S]=(0,oe.createSafeContext)("Select"),ie=i.forwardRef(function({children:o,value:t,defaultValue:r,onValueChange:c,multiple:n=!1,items:p,open:a,defaultOpen:d=!1,onOpenChange:s,onOpenChangeComplete:l,disabled:v=!1,required:b=!1,invalid:m=!1,name:R},D){let T=i.useRef(null),Z=i.useRef(null),$=i.useRef(null),{selectedValues:O,isSelected:ot,selectItem:rt,setSelection:lt}=(0,ce.useSelection)({value:t,defaultValue:r,onValueChange:c,multiple:n}),[j=!1,nt]=(0,ne.useControllableState)({prop:a,defaultProp:d,onChange:s});(0,ae.useOpenChangeComplete)(j,Z,l);let[I,at]=i.useState(new Map),ct=i.useCallback((f,P)=>{at(M=>{if(M.get(f)===P)return M;let ee=new Map(M);return ee.set(f,P),ee})},[]),st=i.useMemo(()=>p?p.map(f=>({...f,label:I.get(f.value)??f.label??f.value})):[...I].map(([f,P])=>({value:f,label:P})),[p,I]),it=i.useCallback(f=>I.get(f)??p?.find(P=>P.value===f)?.label??f,[I,p]);return i.useImperativeHandle(D,()=>(0,L.formValidityHandle)($),[]),(0,L.useFormReset)(T,()=>{r!==void 0&&lt(r)}),(0,h.jsx)(le.PopperRoot,{children:(0,h.jsxs)(se,{triggerRef:T,contentRef:Z,contentId:i.useId(),multiple:n,selectedValues:O,isSelected:ot,selectItem:rt,open:j,onOpenChange:nt,disabled:v,required:b,invalid:m,name:R,registerOptionLabel:ct,getOptionLabel:it,collection:st,children:[o,R&&(O.length>0?O:[""]).map((f,P)=>(0,h.jsx)(re.HiddenInput,{ref:P===0?$:void 0,type:"text",name:R,value:f,required:b,disabled:v},f||P))]})})});ie.displayName="Select";var y=u(require("react"),1),pe=require("../utils/composeRefs.cjs"),me=require("../utils/part.cjs"),fe=require("../utils/popper.cjs"),C=require("../utils/primitive.cjs"),k=require("../utils/useTypeahead.cjs");var V=require("react/jsx-runtime"),K=y.forwardRef((e,o)=>{let t=S("SelectTrigger"),r=(0,pe.useComposedRefs)(o,t.triggerRef),c=t.disabled||e.disabled,n=y.useRef(t.collection);n.current=t.collection.filter(a=>!a.disabled);let p=(0,k.useTypeahead)(y.useCallback(()=>n.current.map(a=>a.label??a.value),[]));return(0,V.jsx)(fe.PopperAnchor,{asChild:!0,children:(0,V.jsx)(C.Primitive.button,{type:"button",role:"combobox","aria-haspopup":"listbox","aria-expanded":t.open,"aria-controls":t.contentId,"aria-required":t.required||void 0,"aria-invalid":t.invalid?!0:void 0,"data-state":t.open?"open":"closed","data-disabled":c?"":void 0,"data-invalid":t.invalid?"":void 0,"data-placeholder":t.selectedValues.length===0?"":void 0,"data-multiple":t.multiple?"":void 0,disabled:c,...e,...(0,me.skdxPart)("select","trigger",e.className),ref:r,onClick:(0,C.composeEventHandlers)(e.onClick,()=>t.onOpenChange(!t.open)),onKeyDown:(0,C.composeEventHandlers)(e.onKeyDown,a=>{if(["ArrowDown","ArrowUp"," ","Enter"].includes(a.key)){a.preventDefault(),t.onOpenChange(!0);return}if(t.open||!(0,k.isTypeaheadKey)(a))return;if(a.preventDefault(),t.multiple){t.onOpenChange(!0);return}let d=n.current.findIndex(l=>t.isSelected(l.value)),s=p(a.key,d);s!==-1&&t.selectItem(n.current[s].value)})})})});K.displayName="SelectTrigger";var de=u(require("react"),1),ue=require("../utils/part.cjs"),Se=require("../utils/primitive.cjs");var q=require("react/jsx-runtime"),A=de.forwardRef(({placeholder:e,children:o,...t},r)=>{let{selectedValues:c,multiple:n,getOptionLabel:p}=S("SelectValue"),a,d=!1;return o!==void 0?a=o:c.length===0?(a=e,d=!0):n?a=c.map(s=>(0,q.jsx)("span",{"data-chip":"","data-value":s,children:p(s)},s)):a=p(c[0]),(0,q.jsx)(Se.Primitive.span,{"data-multiple":n?"":void 0,"data-placeholder":d?"":void 0,...t,...(0,ue.skdxPart)("select","value",t.className),ref:r,style:{pointerEvents:"none",...t.style},children:a})});A.displayName="SelectValue";var Pe=u(require("react"),1),Re=require("../utils/part.cjs"),ye=require("../utils/primitive.cjs"),ge=require("react/jsx-runtime"),G=Pe.forwardRef(({children:e,...o},t)=>(0,ge.jsx)(ye.Primitive.span,{"aria-hidden":!0,...o,...(0,Re.skdxPart)("select","icon",o.className),ref:t,children:e??"\u25BE"}));G.displayName="SelectIcon";var xe=require("../utils/portal.cjs");var Ie=require("react/jsx-runtime"),F=({forceMount:e,children:o,...t})=>{let r=S("SelectPortal");return e||r.open?(0,Ie.jsx)(xe.Portal,{...t,children:o}):null};F.displayName="SelectPortal";var E=u(require("react"),1),Ce=require("../utils/composeRefs.cjs"),ve=require("../utils/part.cjs"),be=require("../utils/popper.cjs"),Te=require("../utils/primitive.cjs"),we=require("../utils/useDismiss.cjs"),Le=require("../utils/useRovingFocus.cjs");var ke=require("react/jsx-runtime"),he='[role="option"]:not([data-disabled])',B=E.forwardRef(({forceMount:e,side:o="bottom",align:t="start",sideOffset:r=4,onEscapeKeyDown:c,onPointerDownOutside:n,onFocusOutside:p,onInteractOutside:a,...d},s)=>{let l=S("SelectContent"),v=(0,Ce.useComposedRefs)(s,l.contentRef),b=(0,Le.useRovingFocus)({orientation:"vertical",loop:!1,itemSelector:he,typeahead:!0});return(0,we.useDismiss)({enabled:l.open,onEscapeKeyDown:m=>{c?.(m),!m.defaultPrevented&&(l.onOpenChange(!1),l.triggerRef.current?.focus())},onInteractOutside:a,onPointerDownOutside:m=>{n?.(m),m.defaultPrevented||l.onOpenChange(!1)},onFocusOutside:m=>{p?.(m),m.defaultPrevented||l.onOpenChange(!1)}},[l.contentRef,l.triggerRef]),E.useEffect(()=>{if(!l.open)return;let m=requestAnimationFrame(()=>{let R=l.contentRef.current;if(!R)return;let D=R.querySelector('[role="option"][data-state="checked"]'),T=R.querySelector(he);(D??T??R).focus()});return()=>cancelAnimationFrame(m)},[l.open,l.contentRef]),e||l.open?(0,ke.jsx)(be.PopperContent,{component:"select",role:"listbox",id:l.contentId,"aria-multiselectable":l.multiple?!0:void 0,"data-state":l.open?"open":"closed","data-multiple":l.multiple?"":void 0,tabIndex:-1,side:o,align:t,sideOffset:r,...d,...(0,ve.skdxPart)("select","content",d.className),ref:v,onKeyDown:(0,Te.composeEventHandlers)(d.onKeyDown,m=>{b(m),m.key==="Tab"&&(m.preventDefault(),l.onOpenChange(!1),l.triggerRef.current?.focus())})}):null});B.displayName="SelectContent";var Ee=u(require("react"),1),He=require("../utils/part.cjs"),Ne=require("../utils/primitive.cjs"),De=require("react/jsx-runtime"),U=Ee.forwardRef((e,o)=>(0,De.jsx)(Ne.Primitive.div,{...e,...(0,He.skdxPart)("select","viewport",e.className),ref:o,style:{overflow:"auto",...e.style}}));U.displayName="SelectViewport";var H=u(require("react"),1),Oe=require("../utils/createContext.cjs"),Me=require("../utils/part.cjs"),g=require("../utils/primitive.cjs");var W=require("react/jsx-runtime"),[Rt,N]=(0,Oe.createSafeContext)("SelectItem"),_=H.forwardRef(({value:e,disabled:o,textValue:t,...r},c)=>{let n=S("SelectItem"),p=n.isSelected(e),a=H.useCallback(s=>n.registerOptionLabel(e,t??s),[n.registerOptionLabel,e,t]),d=()=>{o||(n.selectItem(e),!n.multiple&&(n.onOpenChange(!1),n.triggerRef.current?.focus()))};return(0,W.jsx)(Rt,{value:e,selected:p,registerText:a,children:(0,W.jsx)(g.Primitive.div,{role:"option","aria-selected":p,"data-state":p?"checked":"unchecked","data-text-value":t,"data-disabled":o?"":void 0,tabIndex:o?void 0:-1,...r,...(0,Me.skdxPart)("select","item",r.className),ref:c,onClick:(0,g.composeEventHandlers)(r.onClick,d),onKeyDown:(0,g.composeEventHandlers)(r.onKeyDown,s=>{[" ","Enter"].includes(s.key)&&(s.preventDefault(),d())}),onPointerEnter:(0,g.composeEventHandlers)(r.onPointerEnter,s=>{o||s.currentTarget.focus()})})})});_.displayName="SelectItem";var x=u(require("react"),1),Ve=require("../utils/composeRefs.cjs"),Ke=require("../utils/part.cjs"),qe=require("../utils/primitive.cjs");var Ae=require("react/jsx-runtime"),z=x.forwardRef(({children:e,...o},t)=>{let r=N("SelectItemText"),c=x.useRef(null),n=(0,Ve.useComposedRefs)(t,c);return x.useLayoutEffect(()=>{r.registerText(c.current?.textContent??"")}),(0,Ae.jsx)(qe.Primitive.span,{...o,...(0,Ke.skdxPart)("select","item-text",o.className),ref:n,children:e})});z.displayName="SelectItemText";var Ge=u(require("react"),1),Fe=require("../utils/part.cjs"),Be=require("../utils/primitive.cjs");var Ue=require("react/jsx-runtime"),J=Ge.forwardRef(({forceMount:e,...o},t)=>{let r=N("SelectItemIndicator");return e||r.selected?(0,Ue.jsx)(Be.Primitive.span,{"aria-hidden":!0,...o,...(0,Fe.skdxPart)("select","item-indicator",o.className),ref:t}):null});J.displayName="SelectItemIndicator";var We=u(require("react"),1),_e=require("../utils/part.cjs"),ze=require("../utils/primitive.cjs"),Je=require("react/jsx-runtime"),Q=We.forwardRef((e,o)=>(0,Je.jsx)(ze.Primitive.div,{role:"group",...e,...(0,_e.skdxPart)("select","group",e.className),ref:o}));Q.displayName="SelectGroup";var Qe=u(require("react"),1),Xe=require("../utils/part.cjs"),Ye=require("../utils/primitive.cjs"),Ze=require("react/jsx-runtime"),X=Qe.forwardRef((e,o)=>(0,Ze.jsx)(Ye.Primitive.div,{...e,...(0,Xe.skdxPart)("select","label",e.className),ref:o}));X.displayName="SelectLabel";var $e=u(require("react"),1),je=require("../utils/part.cjs"),et=require("../utils/primitive.cjs"),tt=require("react/jsx-runtime"),Y=$e.forwardRef((e,o)=>(0,tt.jsx)(et.Primitive.div,{"aria-hidden":!0,...e,...(0,je.skdxPart)("select","separator",e.className),ref:o}));Y.displayName="SelectSeparator";0&&(module.exports={Select,SelectContent,SelectGroup,SelectIcon,SelectItem,SelectItemIndicator,SelectItemText,SelectLabel,SelectPortal,SelectProvider,SelectSeparator,SelectTrigger,SelectValue,SelectViewport,useSelectContext});

package/dist/select/Select.d.cts

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import type { SelectContextValue, SelectProps } from './types.cjs';
+/**
+ * Listbox-style select. Options register their text label so the trigger's
+ * `SelectValue` can display the selected option without extra wiring, and the
+ * root merges those registrations with the optional declarative `items`
+ * collection into the single ordered pool that drives labels and typeahead.
+ */
+export declare const SelectProvider: {
+    (props: SelectContextValue & {
+        children: React.ReactNode;
+    }): React.JSX.Element;
+    displayName: string;
+}, useSelectContext: (consumerName: string) => SelectContextValue;
+/**
+ * Root of a listbox-style select: owns the selected value and the popup's
+ * open state, handing both down to every other `Select*` part via context.
+ * Renders no DOM of its own besides visually-hidden native inputs (kept in
+ * sync with `value`) when `name` is set, so the select participates in native
+ * form submission and validation — a form reset restores `defaultValue`, and
+ * the forwarded ref carries `checkValidity()`/`reportValidity()`, which with
+ * `required` and no selection report `valueMissing`. Options register their text label so the
+ * trigger's `SelectValue` can display the selected option's label without
+ * extra wiring — pass `items` to give the root that collection up front, which
+ * is what makes typeahead work on a trigger whose listbox has never opened.
+ *
+ * Set `multiple` for a multi-select: `value` becomes a `string[]`, choosing an
+ * option toggles it, the listbox stays open, and `SelectValue` renders one
+ * chip per selection.
+ *
+ * Works controlled (`value` + `onValueChange`, `open` + `onOpenChange`) or
+ * uncontrolled (`defaultValue`, `defaultOpen`).
+ *
+ * @example
+ * ```tsx
+ * <Select defaultValue="react" name="framework">
+ *   <SelectTrigger className="select-trigger">
+ *     <SelectValue placeholder="Pick a framework" />
+ *     <SelectIcon />
+ *   </SelectTrigger>
+ *   <SelectPortal>
+ *     <SelectContent className="menu">
+ *       <SelectViewport>
+ *         {['react', 'vue', 'svelte', 'solid'].map((fw) => (
+ *           <SelectItem key={fw} value={fw} className="menu-item">
+ *             <SelectItemIndicator>✓</SelectItemIndicator>
+ *             <SelectItemText>{fw}</SelectItemText>
+ *           </SelectItem>
+ *         ))}
+ *       </SelectViewport>
+ *     </SelectContent>
+ *   </SelectPortal>
+ * </Select>
+ * ```
+ *
+ * @example Multi-select, with the collection declared up front so the closed
+ * trigger can run typeahead and render labels before it has ever been opened:
+ * ```tsx
+ * <Select multiple items={FRAMEWORKS} defaultValue={['react']} name="frameworks">
+ *   <SelectTrigger>
+ *     <SelectValue placeholder="Pick frameworks" />
+ *   </SelectTrigger>
+ *   …
+ * </Select>
+ * ```
+ */
+export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<import("../index.cjs").FormValidityHandle>>;

package/dist/select/Select.d.ts

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import type { SelectContextValue, SelectProps } from './types.js';
+/**
+ * Listbox-style select. Options register their text label so the trigger's
+ * `SelectValue` can display the selected option without extra wiring, and the
+ * root merges those registrations with the optional declarative `items`
+ * collection into the single ordered pool that drives labels and typeahead.
+ */
+export declare const SelectProvider: {
+    (props: SelectContextValue & {
+        children: React.ReactNode;
+    }): React.JSX.Element;
+    displayName: string;
+}, useSelectContext: (consumerName: string) => SelectContextValue;
+/**
+ * Root of a listbox-style select: owns the selected value and the popup's
+ * open state, handing both down to every other `Select*` part via context.
+ * Renders no DOM of its own besides visually-hidden native inputs (kept in
+ * sync with `value`) when `name` is set, so the select participates in native
+ * form submission and validation — a form reset restores `defaultValue`, and
+ * the forwarded ref carries `checkValidity()`/`reportValidity()`, which with
+ * `required` and no selection report `valueMissing`. Options register their text label so the
+ * trigger's `SelectValue` can display the selected option's label without
+ * extra wiring — pass `items` to give the root that collection up front, which
+ * is what makes typeahead work on a trigger whose listbox has never opened.
+ *
+ * Set `multiple` for a multi-select: `value` becomes a `string[]`, choosing an
+ * option toggles it, the listbox stays open, and `SelectValue` renders one
+ * chip per selection.
+ *
+ * Works controlled (`value` + `onValueChange`, `open` + `onOpenChange`) or
+ * uncontrolled (`defaultValue`, `defaultOpen`).
+ *
+ * @example
+ * ```tsx
+ * <Select defaultValue="react" name="framework">
+ *   <SelectTrigger className="select-trigger">
+ *     <SelectValue placeholder="Pick a framework" />
+ *     <SelectIcon />
+ *   </SelectTrigger>
+ *   <SelectPortal>
+ *     <SelectContent className="menu">
+ *       <SelectViewport>
+ *         {['react', 'vue', 'svelte', 'solid'].map((fw) => (
+ *           <SelectItem key={fw} value={fw} className="menu-item">
+ *             <SelectItemIndicator>✓</SelectItemIndicator>
+ *             <SelectItemText>{fw}</SelectItemText>
+ *           </SelectItem>
+ *         ))}
+ *       </SelectViewport>
+ *     </SelectContent>
+ *   </SelectPortal>
+ * </Select>
+ * ```
+ *
+ * @example Multi-select, with the collection declared up front so the closed
+ * trigger can run typeahead and render labels before it has ever been opened:
+ * ```tsx
+ * <Select multiple items={FRAMEWORKS} defaultValue={['react']} name="frameworks">
+ *   <SelectTrigger>
+ *     <SelectValue placeholder="Pick frameworks" />
+ *   </SelectTrigger>
+ *   …
+ * </Select>
+ * ```
+ */
+export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<import("../index.js").FormValidityHandle>>;

package/dist/select/Select.js

@@ -0,0 +1 @@
+import*as s from"react";import{createSafeContext as de}from"../utils/createContext.js";import{formValidityHandle as ue,useFormReset as Se}from"../utils/formControl.js";import{HiddenInput as Pe}from"../utils/hiddenInput.js";import{PopperRoot as Re}from"../utils/popper.js";import{useControllableState as ye}from"../utils/useControllableState.js";import{useOpenChangeComplete as ge}from"../utils/useOpenChangeComplete.js";import{useSelection as xe}from"../utils/useSelection.js";import{jsx as O,jsxs as Ce}from"react/jsx-runtime";var[Ie,u]=de("Select"),he=s.forwardRef(function({children:o,value:e,defaultValue:a,onValueChange:f,multiple:l=!1,items:i,open:n,defaultOpen:d=!1,onOpenChange:c,onOpenChangeComplete:r,disabled:x=!1,required:I=!1,invalid:p=!1,name:P},T){let h=s.useRef(null),E=s.useRef(null),H=s.useRef(null),{selectedValues:w,isSelected:ne,selectItem:ae,setSelection:ce}=xe({value:e,defaultValue:a,onValueChange:f,multiple:l}),[N=!1,se]=ye({prop:n,defaultProp:d,onChange:c});ge(N,E,r);let[g,ie]=s.useState(new Map),pe=s.useCallback((m,S)=>{ie(L=>{if(L.get(m)===S)return L;let D=new Map(L);return D.set(m,S),D})},[]),me=s.useMemo(()=>i?i.map(m=>({...m,label:g.get(m.value)??m.label??m.value})):[...g].map(([m,S])=>({value:m,label:S})),[i,g]),fe=s.useCallback(m=>g.get(m)??i?.find(S=>S.value===m)?.label??m,[g,i]);return s.useImperativeHandle(T,()=>ue(H),[]),Se(h,()=>{a!==void 0&&ce(a)}),O(Re,{children:Ce(Ie,{triggerRef:h,contentRef:E,contentId:s.useId(),multiple:l,selectedValues:w,isSelected:ne,selectItem:ae,open:N,onOpenChange:se,disabled:x,required:I,invalid:p,name:P,registerOptionLabel:pe,getOptionLabel:fe,collection:me,children:[o,P&&(w.length>0?w:[""]).map((m,S)=>O(Pe,{ref:S===0?H:void 0,type:"text",name:P,value:m,required:I,disabled:x},m||S))]})})});he.displayName="Select";import*as R from"react";import{useComposedRefs as ve}from"../utils/composeRefs.js";import{skdxPart as be}from"../utils/part.js";import{PopperAnchor as Te}from"../utils/popper.js";import{composeEventHandlers as M,Primitive as we}from"../utils/primitive.js";import{isTypeaheadKey as Le,useTypeahead as ke}from"../utils/useTypeahead.js";import{jsx as V}from"react/jsx-runtime";var K=R.forwardRef((t,o)=>{let e=u("SelectTrigger"),a=ve(o,e.triggerRef),f=e.disabled||t.disabled,l=R.useRef(e.collection);l.current=e.collection.filter(n=>!n.disabled);let i=ke(R.useCallback(()=>l.current.map(n=>n.label??n.value),[]));return V(Te,{asChild:!0,children:V(we.button,{type:"button",role:"combobox","aria-haspopup":"listbox","aria-expanded":e.open,"aria-controls":e.contentId,"aria-required":e.required||void 0,"aria-invalid":e.invalid?!0:void 0,"data-state":e.open?"open":"closed","data-disabled":f?"":void 0,"data-invalid":e.invalid?"":void 0,"data-placeholder":e.selectedValues.length===0?"":void 0,"data-multiple":e.multiple?"":void 0,disabled:f,...t,...be("select","trigger",t.className),ref:a,onClick:M(t.onClick,()=>e.onOpenChange(!e.open)),onKeyDown:M(t.onKeyDown,n=>{if(["ArrowDown","ArrowUp"," ","Enter"].includes(n.key)){n.preventDefault(),e.onOpenChange(!0);return}if(e.open||!Le(n))return;if(n.preventDefault(),e.multiple){e.onOpenChange(!0);return}let d=l.current.findIndex(r=>e.isSelected(r.value)),c=i(n.key,d);c!==-1&&e.selectItem(l.current[c].value)})})})});K.displayName="SelectTrigger";import*as A from"react";import{skdxPart as Ee}from"../utils/part.js";import{Primitive as He}from"../utils/primitive.js";import{jsx as q}from"react/jsx-runtime";var G=A.forwardRef(({placeholder:t,children:o,...e},a)=>{let{selectedValues:f,multiple:l,getOptionLabel:i}=u("SelectValue"),n,d=!1;return o!==void 0?n=o:f.length===0?(n=t,d=!0):l?n=f.map(c=>q("span",{"data-chip":"","data-value":c,children:i(c)},c)):n=i(f[0]),q(He.span,{"data-multiple":l?"":void 0,"data-placeholder":d?"":void 0,...e,...Ee("select","value",e.className),ref:a,style:{pointerEvents:"none",...e.style},children:n})});G.displayName="SelectValue";import*as F from"react";import{skdxPart as Ne}from"../utils/part.js";import{Primitive as De}from"../utils/primitive.js";import{jsx as Oe}from"react/jsx-runtime";var B=F.forwardRef(({children:t,...o},e)=>Oe(De.span,{"aria-hidden":!0,...o,...Ne("select","icon",o.className),ref:e,children:t??"\u25BE"}));B.displayName="SelectIcon";import{Portal as Me}from"../utils/portal.js";import{jsx as Ve}from"react/jsx-runtime";var U=({forceMount:t,children:o,...e})=>{let a=u("SelectPortal");return t||a.open?Ve(Me,{...e,children:o}):null};U.displayName="SelectPortal";import*as C from"react";import{useComposedRefs as Ke}from"../utils/composeRefs.js";import{skdxPart as qe}from"../utils/part.js";import{PopperContent as Ae}from"../utils/popper.js";import{composeEventHandlers as Ge}from"../utils/primitive.js";import{useDismiss as Fe}from"../utils/useDismiss.js";import{useRovingFocus as Be}from"../utils/useRovingFocus.js";import{jsx as Ue}from"react/jsx-runtime";var W='[role="option"]:not([data-disabled])',_=C.forwardRef(({forceMount:t,side:o="bottom",align:e="start",sideOffset:a=4,onEscapeKeyDown:f,onPointerDownOutside:l,onFocusOutside:i,onInteractOutside:n,...d},c)=>{let r=u("SelectContent"),x=Ke(c,r.contentRef),I=Be({orientation:"vertical",loop:!1,itemSelector:W,typeahead:!0});return Fe({enabled:r.open,onEscapeKeyDown:p=>{f?.(p),!p.defaultPrevented&&(r.onOpenChange(!1),r.triggerRef.current?.focus())},onInteractOutside:n,onPointerDownOutside:p=>{l?.(p),p.defaultPrevented||r.onOpenChange(!1)},onFocusOutside:p=>{i?.(p),p.defaultPrevented||r.onOpenChange(!1)}},[r.contentRef,r.triggerRef]),C.useEffect(()=>{if(!r.open)return;let p=requestAnimationFrame(()=>{let P=r.contentRef.current;if(!P)return;let T=P.querySelector('[role="option"][data-state="checked"]'),h=P.querySelector(W);(T??h??P).focus()});return()=>cancelAnimationFrame(p)},[r.open,r.contentRef]),t||r.open?Ue(Ae,{component:"select",role:"listbox",id:r.contentId,"aria-multiselectable":r.multiple?!0:void 0,"data-state":r.open?"open":"closed","data-multiple":r.multiple?"":void 0,tabIndex:-1,side:o,align:e,sideOffset:a,...d,...qe("select","content",d.className),ref:x,onKeyDown:Ge(d.onKeyDown,p=>{I(p),p.key==="Tab"&&(p.preventDefault(),r.onOpenChange(!1),r.triggerRef.current?.focus())})}):null});_.displayName="SelectContent";import*as z from"react";import{skdxPart as We}from"../utils/part.js";import{Primitive as _e}from"../utils/primitive.js";import{jsx as ze}from"react/jsx-runtime";var J=z.forwardRef((t,o)=>ze(_e.div,{...t,...We("select","viewport",t.className),ref:o,style:{overflow:"auto",...t.style}}));J.displayName="SelectViewport";import*as v from"react";import{createSafeContext as Je}from"../utils/createContext.js";import{skdxPart as Qe}from"../utils/part.js";import{composeEventHandlers as k,Primitive as Xe}from"../utils/primitive.js";import{jsx as Q}from"react/jsx-runtime";var[Ye,b]=Je("SelectItem"),X=v.forwardRef(({value:t,disabled:o,textValue:e,...a},f)=>{let l=u("SelectItem"),i=l.isSelected(t),n=v.useCallback(c=>l.registerOptionLabel(t,e??c),[l.registerOptionLabel,t,e]),d=()=>{o||(l.selectItem(t),!l.multiple&&(l.onOpenChange(!1),l.triggerRef.current?.focus()))};return Q(Ye,{value:t,selected:i,registerText:n,children:Q(Xe.div,{role:"option","aria-selected":i,"data-state":i?"checked":"unchecked","data-text-value":e,"data-disabled":o?"":void 0,tabIndex:o?void 0:-1,...a,...Qe("select","item",a.className),ref:f,onClick:k(a.onClick,d),onKeyDown:k(a.onKeyDown,c=>{[" ","Enter"].includes(c.key)&&(c.preventDefault(),d())}),onPointerEnter:k(a.onPointerEnter,c=>{o||c.currentTarget.focus()})})})});X.displayName="SelectItem";import*as y from"react";import{useComposedRefs as Ze}from"../utils/composeRefs.js";import{skdxPart as $e}from"../utils/part.js";import{Primitive as je}from"../utils/primitive.js";import{jsx as et}from"react/jsx-runtime";var Y=y.forwardRef(({children:t,...o},e)=>{let a=b("SelectItemText"),f=y.useRef(null),l=Ze(e,f);return y.useLayoutEffect(()=>{a.registerText(f.current?.textContent??"")}),et(je.span,{...o,...$e("select","item-text",o.className),ref:l,children:t})});Y.displayName="SelectItemText";import*as Z from"react";import{skdxPart as tt}from"../utils/part.js";import{Primitive as ot}from"../utils/primitive.js";import{jsx as rt}from"react/jsx-runtime";var $=Z.forwardRef(({forceMount:t,...o},e)=>{let a=b("SelectItemIndicator");return t||a.selected?rt(ot.span,{"aria-hidden":!0,...o,...tt("select","item-indicator",o.className),ref:e}):null});$.displayName="SelectItemIndicator";import*as j from"react";import{skdxPart as lt}from"../utils/part.js";import{Primitive as nt}from"../utils/primitive.js";import{jsx as at}from"react/jsx-runtime";var ee=j.forwardRef((t,o)=>at(nt.div,{role:"group",...t,...lt("select","group",t.className),ref:o}));ee.displayName="SelectGroup";import*as te from"react";import{skdxPart as ct}from"../utils/part.js";import{Primitive as st}from"../utils/primitive.js";import{jsx as it}from"react/jsx-runtime";var oe=te.forwardRef((t,o)=>it(st.div,{...t,...ct("select","label",t.className),ref:o}));oe.displayName="SelectLabel";import*as re from"react";import{skdxPart as pt}from"../utils/part.js";import{Primitive as mt}from"../utils/primitive.js";import{jsx as ft}from"react/jsx-runtime";var le=re.forwardRef((t,o)=>ft(mt.div,{"aria-hidden":!0,...t,...pt("select","separator",t.className),ref:o}));le.displayName="SelectSeparator";export{he as Select,_ as SelectContent,ee as SelectGroup,B as SelectIcon,X as SelectItem,$ as SelectItemIndicator,Y as SelectItemText,oe as SelectLabel,U as SelectPortal,Ie as SelectProvider,le as SelectSeparator,K as SelectTrigger,G as SelectValue,J as SelectViewport,u as useSelectContext};

package/dist/select/SelectContent.d.cts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import type { SelectContentProps } from './types.cjs';
+/**
+ * The listbox popup for a {@link Select}, positioned relative to the trigger
+ * via floating-ui (see {@link SelectContentProps}). Renders a
+ * `<div role="listbox">` with `data-state` and `data-side`/`data-align` from
+ * the popper. Owns roving-focus + typeahead keyboard navigation between
+ * `SelectItem` options (Arrow Up/Down move focus, printable keys jump to a
+ * matching label), focuses the selected (or first) option on open, and closes
+ * on Tab. Carries `aria-multiselectable="true"` while the root is `multiple`.
+ *
+ * Closes on Escape (returning focus to the trigger) or on an outside
+ * interaction — pointer-down outside or focus moving outside, each reported to
+ * `onPointerDownOutside`/`onFocusOutside` and, just before them and with the
+ * same event, to `onInteractOutside`. Any of those (or `onEscapeKeyDown`)
+ * calling `event.preventDefault()` keeps the listbox open. Unmounts when
+ * closed unless `forceMount` is set.
+ *
+ * @example
+ * ```tsx
+ * <SelectContent>
+ *   <SelectViewport>
+ *     <SelectItem value="react">
+ *       <SelectItemText>react</SelectItemText>
+ *     </SelectItem>
+ *   </SelectViewport>
+ * </SelectContent>
+ * ```
+ */
+export declare const SelectContent: React.ForwardRefExoticComponent<Omit<SelectContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/select/SelectContent.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import type { SelectContentProps } from './types.js';
+/**
+ * The listbox popup for a {@link Select}, positioned relative to the trigger
+ * via floating-ui (see {@link SelectContentProps}). Renders a
+ * `<div role="listbox">` with `data-state` and `data-side`/`data-align` from
+ * the popper. Owns roving-focus + typeahead keyboard navigation between
+ * `SelectItem` options (Arrow Up/Down move focus, printable keys jump to a
+ * matching label), focuses the selected (or first) option on open, and closes
+ * on Tab. Carries `aria-multiselectable="true"` while the root is `multiple`.
+ *
+ * Closes on Escape (returning focus to the trigger) or on an outside
+ * interaction — pointer-down outside or focus moving outside, each reported to
+ * `onPointerDownOutside`/`onFocusOutside` and, just before them and with the
+ * same event, to `onInteractOutside`. Any of those (or `onEscapeKeyDown`)
+ * calling `event.preventDefault()` keeps the listbox open. Unmounts when
+ * closed unless `forceMount` is set.
+ *
+ * @example
+ * ```tsx
+ * <SelectContent>
+ *   <SelectViewport>
+ *     <SelectItem value="react">
+ *       <SelectItemText>react</SelectItemText>
+ *     </SelectItem>
+ *   </SelectViewport>
+ * </SelectContent>
+ * ```
+ */
+export declare const SelectContent: React.ForwardRefExoticComponent<Omit<SelectContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/select/SelectGroup.d.cts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import type { SelectGroupProps } from './types.cjs';
+/**
+ * Groups related `SelectItem`s together, typically preceded by a
+ * {@link SelectLabel}. Renders a `<div role="group">`.
+ *
+ * @example
+ * ```tsx
+ * <SelectGroup>
+ *   <SelectLabel>Frameworks</SelectLabel>
+ *   <SelectItem value="react">
+ *     <SelectItemText>react</SelectItemText>
+ *   </SelectItem>
+ * </SelectGroup>
+ * ```
+ */
+export declare const SelectGroup: React.ForwardRefExoticComponent<Omit<SelectGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/select/SelectGroup.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import type { SelectGroupProps } from './types.js';
+/**
+ * Groups related `SelectItem`s together, typically preceded by a
+ * {@link SelectLabel}. Renders a `<div role="group">`.
+ *
+ * @example
+ * ```tsx
+ * <SelectGroup>
+ *   <SelectLabel>Frameworks</SelectLabel>
+ *   <SelectItem value="react">
+ *     <SelectItemText>react</SelectItemText>
+ *   </SelectItem>
+ * </SelectGroup>
+ * ```
+ */
+export declare const SelectGroup: React.ForwardRefExoticComponent<Omit<SelectGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/select/SelectIcon.d.cts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import type { SelectIconProps } from './types.cjs';
+/**
+ * Decorative indicator inside a {@link SelectTrigger} (e.g. a chevron).
+ * Renders an `aria-hidden` `<span>` defaulting to `▾` when no `children`
+ * are given.
+ *
+ * @example
+ * ```tsx
+ * <SelectTrigger>
+ *   <SelectValue placeholder="Pick a framework" />
+ *   <SelectIcon />
+ * </SelectTrigger>
+ * ```
+ */
+export declare const SelectIcon: React.ForwardRefExoticComponent<Omit<SelectIconProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;

package/dist/select/SelectIcon.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import type { SelectIconProps } from './types.js';
+/**
+ * Decorative indicator inside a {@link SelectTrigger} (e.g. a chevron).
+ * Renders an `aria-hidden` `<span>` defaulting to `▾` when no `children`
+ * are given.
+ *
+ * @example
+ * ```tsx
+ * <SelectTrigger>
+ *   <SelectValue placeholder="Pick a framework" />
+ *   <SelectIcon />
+ * </SelectTrigger>
+ * ```
+ */
+export declare const SelectIcon: React.ForwardRefExoticComponent<Omit<SelectIconProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;

package/dist/select/SelectItem.d.cts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import type { SelectItemContextValue, SelectItemProps } from './types.cjs';
+export declare const SelectItemProvider: {
+    (props: SelectItemContextValue & {
+        children: React.ReactNode;
+    }): React.JSX.Element;
+    displayName: string;
+}, useSelectItemContext: (consumerName: string) => SelectItemContextValue;
+/**
+ * A single selectable option within {@link SelectContent}. Renders a
+ * `<div role="option">` with `aria-selected`, `data-state`
+ * (`"checked"` | `"unchecked"`), `data-disabled`, and a roving `tabIndex`.
+ * Registers its text (from `SelectItemText`, or `textValue` if given) so the
+ * trigger's `SelectValue` can render the label. Click, Enter, or Space
+ * selects the item and closes the listbox, returning focus to the trigger —
+ * or, while the root is `multiple`, toggles the item and leaves the listbox
+ * open with focus on it, so several options can be picked in one pass.
+ * Pointer hover moves roving focus onto it.
+ *
+ * @example
+ * ```tsx
+ * <SelectItem value="react">
+ *   <SelectItemIndicator>✓</SelectItemIndicator>
+ *   <SelectItemText>react</SelectItemText>
+ * </SelectItem>
+ * ```
+ */
+export declare const SelectItem: React.ForwardRefExoticComponent<Omit<SelectItemProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/select/SelectItem.d.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import type { SelectItemContextValue, SelectItemProps } from './types.js';
+export declare const SelectItemProvider: {
+    (props: SelectItemContextValue & {
+        children: React.ReactNode;
+    }): React.JSX.Element;
+    displayName: string;
+}, useSelectItemContext: (consumerName: string) => SelectItemContextValue;
+/**
+ * A single selectable option within {@link SelectContent}. Renders a
+ * `<div role="option">` with `aria-selected`, `data-state`
+ * (`"checked"` | `"unchecked"`), `data-disabled`, and a roving `tabIndex`.
+ * Registers its text (from `SelectItemText`, or `textValue` if given) so the
+ * trigger's `SelectValue` can render the label. Click, Enter, or Space
+ * selects the item and closes the listbox, returning focus to the trigger —
+ * or, while the root is `multiple`, toggles the item and leaves the listbox
+ * open with focus on it, so several options can be picked in one pass.
+ * Pointer hover moves roving focus onto it.
+ *
+ * @example
+ * ```tsx
+ * <SelectItem value="react">
+ *   <SelectItemIndicator>✓</SelectItemIndicator>
+ *   <SelectItemText>react</SelectItemText>
+ * </SelectItem>
+ * ```
+ */
+export declare const SelectItem: React.ForwardRefExoticComponent<Omit<SelectItemProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/select/SelectItemIndicator.d.cts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import type { SelectItemIndicatorProps } from './types.cjs';
+/**
+ * Marker shown inside a {@link SelectItem} when it's the selected option
+ * (e.g. a checkmark). Renders an `aria-hidden` `<span>`; renders nothing
+ * while its item isn't selected unless `forceMount` is set.
+ *
+ * @example
+ * ```tsx
+ * <SelectItem value="react">
+ *   <SelectItemIndicator>✓</SelectItemIndicator>
+ *   <SelectItemText>react</SelectItemText>
+ * </SelectItem>
+ * ```
+ */
+export declare const SelectItemIndicator: React.ForwardRefExoticComponent<Omit<SelectItemIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;

package/dist/select/SelectItemIndicator.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import type { SelectItemIndicatorProps } from './types.js';
+/**
+ * Marker shown inside a {@link SelectItem} when it's the selected option
+ * (e.g. a checkmark). Renders an `aria-hidden` `<span>`; renders nothing
+ * while its item isn't selected unless `forceMount` is set.
+ *
+ * @example
+ * ```tsx
+ * <SelectItem value="react">
+ *   <SelectItemIndicator>✓</SelectItemIndicator>
+ *   <SelectItemText>react</SelectItemText>
+ * </SelectItem>
+ * ```
+ */
+export declare const SelectItemIndicator: React.ForwardRefExoticComponent<Omit<SelectItemIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;

package/dist/select/SelectItemText.d.cts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import type { SelectItemTextProps } from './types.cjs';
+/**
+ * Label content of a {@link SelectItem}. Renders a plain `<span>` and
+ * registers its rendered text content with the item on every render, so
+ * `SelectValue` can display it once the item is selected.
+ *
+ * @example
+ * ```tsx
+ * <SelectItem value="react">
+ *   <SelectItemText>react</SelectItemText>
+ * </SelectItem>
+ * ```
+ */
+export declare const SelectItemText: React.ForwardRefExoticComponent<Omit<SelectItemTextProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;

package/dist/select/SelectItemText.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import type { SelectItemTextProps } from './types.js';
+/**
+ * Label content of a {@link SelectItem}. Renders a plain `<span>` and
+ * registers its rendered text content with the item on every render, so
+ * `SelectValue` can display it once the item is selected.
+ *
+ * @example
+ * ```tsx
+ * <SelectItem value="react">
+ *   <SelectItemText>react</SelectItemText>
+ * </SelectItem>
+ * ```
+ */
+export declare const SelectItemText: React.ForwardRefExoticComponent<Omit<SelectItemTextProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;

package/dist/select/SelectLabel.d.cts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import type { SelectLabelProps } from './types.cjs';
+/**
+ * Heading for a {@link SelectGroup}. Renders a plain `<div>` — purely
+ * presentational, with no implicit `aria-labelledby` wiring to the group.
+ *
+ * @example
+ * ```tsx
+ * <SelectGroup>
+ *   <SelectLabel>Frameworks</SelectLabel>
+ *   <SelectItem value="react">
+ *     <SelectItemText>react</SelectItemText>
+ *   </SelectItem>
+ * </SelectGroup>
+ * ```
+ */
+export declare const SelectLabel: React.ForwardRefExoticComponent<Omit<SelectLabelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/select/SelectLabel.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import type { SelectLabelProps } from './types.js';
+/**
+ * Heading for a {@link SelectGroup}. Renders a plain `<div>` — purely
+ * presentational, with no implicit `aria-labelledby` wiring to the group.
+ *
+ * @example
+ * ```tsx
+ * <SelectGroup>
+ *   <SelectLabel>Frameworks</SelectLabel>
+ *   <SelectItem value="react">
+ *     <SelectItemText>react</SelectItemText>
+ *   </SelectItem>
+ * </SelectGroup>
+ * ```
+ */
+export declare const SelectLabel: React.ForwardRefExoticComponent<Omit<SelectLabelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/select/SelectPortal.d.cts

@@ -0,0 +1,24 @@
+import type { SelectPortalProps } from './types.cjs';
+/**
+ * Teleports its children (typically {@link SelectContent}) to
+ * `document.body` (or `container`, via `PortalProps`) while the
+ * {@link Select}'s listbox is open, so it escapes clipping/overflow from
+ * ancestors. Renders nothing while closed unless `forceMount` is set.
+ *
+ * @example
+ * ```tsx
+ * <SelectPortal>
+ *   <SelectContent>
+ *     <SelectViewport>
+ *       <SelectItem value="react">
+ *         <SelectItemText>react</SelectItemText>
+ *       </SelectItem>
+ *     </SelectViewport>
+ *   </SelectContent>
+ * </SelectPortal>
+ * ```
+ */
+export declare const SelectPortal: {
+    ({ forceMount, children, ...props }: SelectPortalProps): import("react").JSX.Element | null;
+    displayName: string;
+};

package/dist/select/SelectPortal.d.ts

@@ -0,0 +1,24 @@
+import type { SelectPortalProps } from './types.js';
+/**
+ * Teleports its children (typically {@link SelectContent}) to
+ * `document.body` (or `container`, via `PortalProps`) while the
+ * {@link Select}'s listbox is open, so it escapes clipping/overflow from
+ * ancestors. Renders nothing while closed unless `forceMount` is set.
+ *
+ * @example
+ * ```tsx
+ * <SelectPortal>
+ *   <SelectContent>
+ *     <SelectViewport>
+ *       <SelectItem value="react">
+ *         <SelectItemText>react</SelectItemText>
+ *       </SelectItem>
+ *     </SelectViewport>
+ *   </SelectContent>
+ * </SelectPortal>
+ * ```
+ */
+export declare const SelectPortal: {
+    ({ forceMount, children, ...props }: SelectPortalProps): import("react").JSX.Element | null;
+    displayName: string;
+};

package/dist/select/SelectSeparator.d.cts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import type { SelectSeparatorProps } from './types.cjs';
+/**
+ * Visual divider between `SelectItem`s or `SelectGroup`s inside
+ * {@link SelectContent}. Renders an `aria-hidden` `<div>`.
+ *
+ * @example
+ * ```tsx
+ * <SelectViewport>
+ *   <SelectItem value="react"><SelectItemText>react</SelectItemText></SelectItem>
+ *   <SelectSeparator />
+ *   <SelectItem value="vue"><SelectItemText>vue</SelectItemText></SelectItem>
+ * </SelectViewport>
+ * ```
+ */
+export declare const SelectSeparator: React.ForwardRefExoticComponent<Omit<SelectSeparatorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;