@skdx/react 0.28.0 → 0.29.0

package/dist/link/Link.d.cts

@@ -1,10 +1,7 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { LinkProps } from './types.cjs';
 /**
- * Renders `<a>` with a safe `rel` default on `target="_blank"` and `external`
- * inferred from `href`'s origin unless set explicitly. `disabled` sets
- * `aria-disabled`/`tabindex="-1"` and intercepts activation, since `<a>` has
- * no native `disabled` attribute.
+ * Renders an `<a>` with a safe `rel` default, external-link inference, and an interception-based disabled state.
  *
  * @example
  * ```tsx
@@ -13,4 +10,7 @@ import type { LinkProps } from './types.cjs';
  * </Link>
  * ```
  */
-export declare const Link: React.ForwardRefExoticComponent<Omit<LinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
+export declare const Link: {
+    ({ as, href, underline, external, disabled, onClick, onKeyDown, ref: forwardedRef, ...props }: LinkProps): React.ReactNode;
+    displayName: string;
+};

package/dist/link/Link.d.ts

@@ -1,10 +1,7 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { LinkProps } from './types.js';
 /**
- * Renders `<a>` with a safe `rel` default on `target="_blank"` and `external`
- * inferred from `href`'s origin unless set explicitly. `disabled` sets
- * `aria-disabled`/`tabindex="-1"` and intercepts activation, since `<a>` has
- * no native `disabled` attribute.
+ * Renders an `<a>` with a safe `rel` default, external-link inference, and an interception-based disabled state.
  *
  * @example
  * ```tsx
@@ -13,4 +10,7 @@ import type { LinkProps } from './types.js';
  * </Link>
  * ```
  */
-export declare const Link: React.ForwardRefExoticComponent<Omit<LinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
+export declare const Link: {
+    ({ as, href, underline, external, disabled, onClick, onKeyDown, ref: forwardedRef, ...props }: LinkProps): React.ReactNode;
+    displayName: string;
+};

package/dist/link/Link.js

@@ -1 +1,2 @@
-import*as s from"react";import{skdxPart as d}from"../utils/part.js";import{composeEventHandlers as i,Primitive as m}from"../utils/primitive.js";import{jsx as L}from"react/jsx-runtime";var k=/^(?:https?:)?\/\//i;function v(e){if(!e)return!1;try{return typeof document>"u"?k.test(e):new URL(e,document.baseURI).origin!==window.location.origin}catch{return!1}}function y(e){e.preventDefault(),e.stopPropagation()}function E(e){e.key==="Enter"&&e.preventDefault()}var P=s.forwardRef(({as:e="a",href:t,underline:l="auto",external:f,disabled:n=!1,onClick:r,onKeyDown:o,...a},p)=>{let u=m[e],c=f??v(t);return L(u,{href:t,"data-underline":l,...c?{"data-external":""}:null,...n?{"aria-disabled":"true",tabIndex:-1,"data-disabled":""}:null,onClick:n?i(r,y,{checkForDefaultPrevented:!1}):r,onKeyDown:n?i(o,E,{checkForDefaultPrevented:!1}):o,...a,...d("link","root",a.className),ref:p})});P.displayName="Link";export{P as Link};
+'use client';
+import{skdxPart as p}from"../utils/part.js";import{composeEventHandlers as i,Primitive as m}from"../utils/primitive.js";import{jsx as R}from"react/jsx-runtime";var k=/^(?:https?:)?\/\//i;function v(e){if(!e)return!1;try{return typeof document>"u"?k.test(e):new URL(e,document.baseURI).origin!==window.location.origin}catch{return!1}}function y(e){e.preventDefault(),e.stopPropagation()}function P(e){e.key==="Enter"&&e.preventDefault()}var E=({as:e="a",href:n,underline:l="auto",external:f,disabled:r=!1,onClick:o,onKeyDown:a,ref:s,...t})=>{let c=m[e],u=f??v(n),d=t.target==="_blank"&&t.rel===void 0?"noopener noreferrer":t.rel;return R(c,{href:n,"data-underline":l,...u?{"data-external":""}:null,...r?{"aria-disabled":"true",tabIndex:-1,"data-disabled":""}:null,onClick:r?i(o,y,{checkForDefaultPrevented:!1}):o,onKeyDown:r?i(a,P,{checkForDefaultPrevented:!1}):a,...t,rel:d,...p("link","root",t.className),ref:s})};E.displayName="Link";export{E as Link};

package/dist/link/types.d.cts

@@ -5,20 +5,20 @@ export interface LinkProps extends PrimitivePropsWithRef<'a'> {
      * Element name to render, from the library's tag allowlist.
      * @default 'a'
      */
-    as?: PolymorphicTag;
+    as?: PolymorphicTag | undefined;
     /**
      * Underline style, exposed as the `data-underline` attribute.
      * @default 'auto'
      */
-    underline?: 'auto' | 'always' | 'hover' | 'none';
+    underline?: 'auto' | 'always' | 'hover' | 'none' | undefined;
     /**
      * Marks the link as external, inferred from `href`'s origin when omitted.
      * @default undefined — inferred from `href`.
      */
-    external?: boolean;
+    external?: boolean | undefined;
     /**
      * Disables navigation while keeping `href` on the element and removing it from the tab order.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
 }

package/dist/link/types.d.ts

@@ -5,20 +5,20 @@ export interface LinkProps extends PrimitivePropsWithRef<'a'> {
      * Element name to render, from the library's tag allowlist.
      * @default 'a'
      */
-    as?: PolymorphicTag;
+    as?: PolymorphicTag | undefined;
     /**
      * Underline style, exposed as the `data-underline` attribute.
      * @default 'auto'
      */
-    underline?: 'auto' | 'always' | 'hover' | 'none';
+    underline?: 'auto' | 'always' | 'hover' | 'none' | undefined;
     /**
      * Marks the link as external, inferred from `href`'s origin when omitted.
      * @default undefined — inferred from `href`.
      */
-    external?: boolean;
+    external?: boolean | undefined;
     /**
      * Disables navigation while keeping `href` on the element and removing it from the tab order.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
 }

package/dist/list/List.cjs

@@ -1 +1,2 @@
-"use strict";var H=Object.create;var p=Object.defineProperty;var M=Object.getOwnPropertyDescriptor;var T=Object.getOwnPropertyNames;var V=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var O=(t,e)=>{for(var o in e)p(t,o,{get:e[o],enumerable:!0})},S=(t,e,o,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of T(e))!g.call(t,i)&&i!==o&&p(t,i,{get:()=>e[i],enumerable:!(s=M(e,i))||s.enumerable});return t};var v=(t,e,o)=>(o=t!=null?H(V(t)):{},S(e||!t||!t.__esModule?p(o,"default",{value:t,enumerable:!0}):o,t)),U=t=>S(p({},"__esModule",{value:!0}),t);var h={};O(h,{List:()=>P,ListItem:()=>x});module.exports=U(h);var I=v(require("react"),1),C=require("../utils/createContext.cjs"),E=require("../utils/part.cjs"),N=require("../utils/primitive.cjs"),k=require("../utils/resolveSpace.cjs"),u=require("react/jsx-runtime"),[b,w]=(0,C.createSafeContext)("List",{icon:void 0}),P=I.forwardRef(({as:t="ul",markers:e=!0,spacing:o,start:s,reversed:i,icon:c,style:l,...r},d)=>{let L=N.Primitive[t],m={listStyle:e===!1?"none":void 0,gap:(0,k.resolveSpace)(o),...l};return(0,u.jsx)(b,{icon:c,children:(0,u.jsx)(L,{...e===!1?{"data-markers":"false",role:"list"}:null,start:t==="ol"?s:void 0,reversed:t==="ol"?i:void 0,...r,style:m,...(0,E.skdxPart)("list","root",r.className),ref:d})})});P.displayName="List";var a=v(require("react"),1),R=require("../utils/part.cjs"),y=require("../utils/primitive.cjs");var n=require("react/jsx-runtime"),x=a.forwardRef(({icon:t,style:e,children:o,...s},i)=>{let c=w("ListItem"),l=t!==void 0?t:c.icon,r=l!=null,d={listStyle:r?"none":void 0,...e},L=(0,R.skdxPart)("list","item",s.className),m=r?(0,n.jsx)(y.Primitive.span,{...(0,R.skdxPart)("list","indicator"),children:l}):null,f;return s.asChild&&r&&a.isValidElement(o)?f=a.cloneElement(o,void 0,m,o.props.children):r?f=(0,n.jsxs)(n.Fragment,{children:[m,o]}):f=o,(0,n.jsx)(y.Primitive.li,{...s,style:d,...L,ref:i,children:f})});x.displayName="ListItem";0&&(module.exports={List,ListItem});
+'use client';
+"use strict";var q=Object.create;var P=Object.defineProperty;var B=Object.getOwnPropertyDescriptor;var F=Object.getOwnPropertyNames;var G=Object.getPrototypeOf,K=Object.prototype.hasOwnProperty;var Q=(t,e)=>{for(var i in e)P(t,i,{get:e[i],enumerable:!0})},C=(t,e,i,m)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of F(e))!K.call(t,o)&&o!==i&&P(t,o,{get:()=>e[o],enumerable:!(m=B(e,o))||m.enumerable});return t};var U=(t,e,i)=>(i=t!=null?q(G(t)):{},C(e||!t||!t.__esModule?P(i,"default",{value:t,enumerable:!0}):i,t)),W=t=>C(P({},"__esModule",{value:!0}),t);var Z={};Q(Z,{List:()=>T,ListDescription:()=>d,ListItem:()=>f,ListTerm:()=>L});module.exports=W(Z);var X=require("../utils/appearance.cjs"),b=require("../utils/createContext.cjs"),g=require("../utils/part.cjs"),z=require("../utils/primitive.cjs"),H=require("../utils/resolveSpace.cjs");var D=require("../utils/part.cjs"),k=require("../utils/primitive.cjs"),h=require("react/jsx-runtime"),d=({ref:t,...e})=>(0,h.jsx)(k.Primitive.dd,{...e,...(0,D.skdxPart)("list","description",e.className),ref:t});d.displayName="ListDescription";var R=U(require("react"),1),E=require("../utils/part.cjs"),u=require("../utils/primitive.cjs");var n=require("react/jsx-runtime"),f=({icon:t,style:e,children:i,ref:m,...o})=>{let y=A("ListItem"),l=y.as==="dl",v=t!==void 0?t:y.icon,c=l?void 0:v,a=c!=null,N={listStyle:a?"none":void 0,...e},S=(0,E.skdxPart)("list","item",o.className),p=a?(0,n.jsx)(u.Primitive.span,{...(0,E.skdxPart)("list","indicator"),children:c}):null,r;o.asChild&&a&&R.isValidElement(i)?r=R.cloneElement(i,void 0,p,i.props.children):a?r=(0,n.jsxs)(n.Fragment,{children:[p,i]}):r=i;let I=l?u.Primitive.div:u.Primitive.li;return(0,n.jsx)(I,{...o,style:l?e:N,...S,ref:m,children:r})};f.displayName="ListItem";var V=require("../utils/part.cjs"),w=require("../utils/primitive.cjs"),J=require("react/jsx-runtime"),L=({ref:t,...e})=>(0,J.jsx)(w.Primitive.dt,{...e,...(0,V.skdxPart)("list","term",e.className),ref:t});L.displayName="ListTerm";var s=require("react/jsx-runtime"),O=({items:t=[]})=>(0,s.jsx)(s.Fragment,{children:t.map((e,i)=>(0,s.jsxs)(f,{children:[(0,s.jsx)(L,{children:e.label}),(0,s.jsx)(d,{children:e.value})]},i))});var x=require("react/jsx-runtime"),[Y,A]=(0,b.createSafeContext)("List",{icon:void 0,as:"ul"}),T=({as:t="ul",markers:e=!0,spacing:i,start:m,reversed:o,icon:y,orientation:l="horizontal",density:v,items:c,children:a,style:N,ref:S,...p})=>{let r=t==="dl",I=z.Primitive[t],M={listStyle:e===!1?"none":void 0,gap:(0,H.resolveSpace)(i),...N};return(0,x.jsx)(Y,{icon:y,as:t,children:(0,x.jsx)(I,{"data-markers":e===!1?"false":void 0,role:e===!1&&!r?"list":void 0,"data-orientation":r?l:void 0,start:t==="ol"?m:void 0,reversed:t==="ol"?o:void 0,...p,style:M,...(0,X.appearanceAttrs)({density:v},p),...(0,g.skdxPart)("list","root",p.className),ref:S,children:a??(r?(0,x.jsx)(O,{items:c}):null)})})};T.displayName="List";0&&(module.exports={List,ListDescription,ListItem,ListTerm});

package/dist/list/List.d.cts

@@ -1,16 +1,11 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { ListContextValue, ListProps } from './types.cjs';
-/** @internal Distributes the default marker icon to every {@link ListItem}. Not part of the public API. */
-export declare const ListProvider: {
-    (props: ListContextValue & {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    displayName: string;
-}, useListContext: (consumerName: string) => ListContextValue;
+/** @internal Distributes the element choice and default marker icon to every {@link ListItem}. */
+export declare const ListProvider: React.FC<ListContextValue & {
+    children: React.ReactNode;
+}>, useListContext: (consumerName: string) => ListContextValue;
 /**
- * Renders `<ul>` (or `<ol>`/`<dl>` via `as`). `markers={false}` strips the
- * marker and adds `role="list"` to the container, since Safari/VoiceOver
- * otherwise drops list semantics from a marker-less list.
+ * Renders a `<ul>`, `<ol>`, or `<dl>` via `as`, with `markers={false}` restoring list semantics via `role="list"`; under `dl` each item is a term/description pair, derived from `items` or composed by hand.
  *
  * @example
  * ```tsx
@@ -18,6 +13,18 @@ export declare const ListProvider: {
  *   <ListItem>First</ListItem>
  *   <ListItem>Second</ListItem>
  * </List>
+ *
+ * <List
+ *   as="dl"
+ *   orientation="horizontal"
+ *   items={[
+ *     { label: 'Status', value: 'Active' },
+ *     { label: 'Region', value: 'eu-west-1' },
+ *   ]}
+ * />
  * ```
  */
-export declare const List: React.ForwardRefExoticComponent<Omit<ListProps, "ref"> & React.RefAttributes<HTMLUListElement>>;
+export declare const List: {
+    ({ as, markers, spacing, start, reversed, icon, orientation, density, items, children, style, ref: forwardedRef, ...props }: ListProps): React.ReactNode;
+    displayName: string;
+};

package/dist/list/List.d.ts

@@ -1,16 +1,11 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { ListContextValue, ListProps } from './types.js';
-/** @internal Distributes the default marker icon to every {@link ListItem}. Not part of the public API. */
-export declare const ListProvider: {
-    (props: ListContextValue & {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    displayName: string;
-}, useListContext: (consumerName: string) => ListContextValue;
+/** @internal Distributes the element choice and default marker icon to every {@link ListItem}. */
+export declare const ListProvider: React.FC<ListContextValue & {
+    children: React.ReactNode;
+}>, useListContext: (consumerName: string) => ListContextValue;
 /**
- * Renders `<ul>` (or `<ol>`/`<dl>` via `as`). `markers={false}` strips the
- * marker and adds `role="list"` to the container, since Safari/VoiceOver
- * otherwise drops list semantics from a marker-less list.
+ * Renders a `<ul>`, `<ol>`, or `<dl>` via `as`, with `markers={false}` restoring list semantics via `role="list"`; under `dl` each item is a term/description pair, derived from `items` or composed by hand.
  *
  * @example
  * ```tsx
@@ -18,6 +13,18 @@ export declare const ListProvider: {
  *   <ListItem>First</ListItem>
  *   <ListItem>Second</ListItem>
  * </List>
+ *
+ * <List
+ *   as="dl"
+ *   orientation="horizontal"
+ *   items={[
+ *     { label: 'Status', value: 'Active' },
+ *     { label: 'Region', value: 'eu-west-1' },
+ *   ]}
+ * />
  * ```
  */
-export declare const List: React.ForwardRefExoticComponent<Omit<ListProps, "ref"> & React.RefAttributes<HTMLUListElement>>;
+export declare const List: {
+    ({ as, markers, spacing, start, reversed, icon, orientation, density, items, children, style, ref: forwardedRef, ...props }: ListProps): React.ReactNode;
+    displayName: string;
+};

package/dist/list/List.js

@@ -1 +1,2 @@
-import*as L from"react";import{createSafeContext as v}from"../utils/createContext.js";import{skdxPart as I}from"../utils/part.js";import{Primitive as C}from"../utils/primitive.js";import{resolveSpace as E}from"../utils/resolveSpace.js";import{jsx as d}from"react/jsx-runtime";var[N,u]=v("List",{icon:void 0}),P=L.forwardRef(({as:o="ul",markers:n=!0,spacing:t,start:s,reversed:m,icon:f,style:r,...e},p)=>{let c=C[o],a={listStyle:n===!1?"none":void 0,gap:E(t),...r};return d(N,{icon:f,children:d(c,{...n===!1?{"data-markers":"false",role:"list"}:null,start:o==="ol"?s:void 0,reversed:o==="ol"?m:void 0,...e,style:a,...I("list","root",e.className),ref:p})})});P.displayName="List";import*as i from"react";import{skdxPart as R}from"../utils/part.js";import{Primitive as y}from"../utils/primitive.js";import{Fragment as k,jsx as x,jsxs as w}from"react/jsx-runtime";var S=i.forwardRef(({icon:o,style:n,children:t,...s},m)=>{let f=u("ListItem"),r=o!==void 0?o:f.icon,e=r!=null,p={listStyle:e?"none":void 0,...n},c=R("list","item",s.className),a=e?x(y.span,{...R("list","indicator"),children:r}):null,l;return s.asChild&&e&&i.isValidElement(t)?l=i.cloneElement(t,void 0,a,t.props.children):e?l=w(k,{children:[a,t]}):l=t,x(y.li,{...s,style:p,...c,ref:m,children:l})});S.displayName="ListItem";export{P as List,S as ListItem};
+'use client';
+import{appearanceAttrs as z}from"../utils/appearance.js";import{createSafeContext as H}from"../utils/createContext.js";import{skdxPart as M}from"../utils/part.js";import{Primitive as q}from"../utils/primitive.js";import{resolveSpace as B}from"../utils/resolveSpace.js";import{skdxPart as k}from"../utils/part.js";import{Primitive as h}from"../utils/primitive.js";import{jsx as A}from"react/jsx-runtime";var l=({ref:e,...t})=>A(h.dd,{...t,...k("list","description",t.className),ref:e});l.displayName="ListDescription";import*as c from"react";import{skdxPart as S}from"../utils/part.js";import{Primitive as x}from"../utils/primitive.js";import{Fragment as V,jsx as I,jsxs as w}from"react/jsx-runtime";var d=({icon:e,style:t,children:i,ref:L,...n})=>{let p=E("ListItem"),m=p.as==="dl",y=e!==void 0?e:p.icon,a=m?void 0:y,r=a!=null,P={listStyle:r?"none":void 0,...t},u=S("list","item",n.className),s=r?I(x.span,{...S("list","indicator"),children:a}):null,o;n.asChild&&r&&c.isValidElement(i)?o=c.cloneElement(i,void 0,s,i.props.children):r?o=w(V,{children:[s,i]}):o=i;let R=m?x.div:x.li;return I(R,{...n,style:m?t:P,...u,ref:L,children:o})};d.displayName="ListItem";import{skdxPart as J}from"../utils/part.js";import{Primitive as O}from"../utils/primitive.js";import{jsx as X}from"react/jsx-runtime";var f=({ref:e,...t})=>X(O.dt,{...t,...J("list","term",t.className),ref:e});f.displayName="ListTerm";import{Fragment as g,jsx as v,jsxs as b}from"react/jsx-runtime";var T=({items:e=[]})=>v(g,{children:e.map((t,i)=>b(d,{children:[v(f,{children:t.label}),v(l,{children:t.value})]},i))});import{jsx as N}from"react/jsx-runtime";var[F,E]=H("List",{icon:void 0,as:"ul"}),C=({as:e="ul",markers:t=!0,spacing:i,start:L,reversed:n,icon:p,orientation:m="horizontal",density:y,items:a,children:r,style:P,ref:u,...s})=>{let o=e==="dl",R=q[e],D={listStyle:t===!1?"none":void 0,gap:B(i),...P};return N(F,{icon:p,as:e,children:N(R,{"data-markers":t===!1?"false":void 0,role:t===!1&&!o?"list":void 0,"data-orientation":o?m:void 0,start:e==="ol"?L:void 0,reversed:e==="ol"?n:void 0,...s,style:D,...z({density:y},s),...M("list","root",s.className),ref:u,children:r??(o?N(T,{items:a}):null)})})};C.displayName="List";export{C as List,l as ListDescription,d as ListItem,f as ListTerm};

package/dist/list/ListAnatomy.d.cts

@@ -0,0 +1,10 @@
+import type { JSX } from 'react';
+import type { ListEntry } from './types.cjs';
+/**
+ * The anatomy a {@link List} draws from `items` under `as="dl"`: one item per term/description pair.
+ *
+ * @internal
+ */
+export declare const ListAnatomy: ({ items }: {
+    items?: ListEntry[] | undefined;
+}) => JSX.Element;

package/dist/list/ListAnatomy.d.ts

@@ -0,0 +1,10 @@
+import type { JSX } from 'react';
+import type { ListEntry } from './types.js';
+/**
+ * The anatomy a {@link List} draws from `items` under `as="dl"`: one item per term/description pair.
+ *
+ * @internal
+ */
+export declare const ListAnatomy: ({ items }: {
+    items?: ListEntry[] | undefined;
+}) => JSX.Element;

package/dist/list/ListDescription.d.cts

@@ -0,0 +1,16 @@
+import type * as React from 'react';
+import type { ListDescriptionProps } from './types.cjs';
+/**
+ * The description half of a description-list pair, rendering a `<dd>`; one term may be followed by several for a multi-valued key.
+ *
+ * @example
+ * ```tsx
+ * <ListTerm>Owners</ListTerm>
+ * <ListDescription>Ada</ListDescription>
+ * <ListDescription>Grace</ListDescription>
+ * ```
+ */
+export declare const ListDescription: {
+    ({ ref: forwardedRef, ...props }: ListDescriptionProps): React.ReactNode;
+    displayName: string;
+};

package/dist/list/ListDescription.d.ts

@@ -0,0 +1,16 @@
+import type * as React from 'react';
+import type { ListDescriptionProps } from './types.js';
+/**
+ * The description half of a description-list pair, rendering a `<dd>`; one term may be followed by several for a multi-valued key.
+ *
+ * @example
+ * ```tsx
+ * <ListTerm>Owners</ListTerm>
+ * <ListDescription>Ada</ListDescription>
+ * <ListDescription>Grace</ListDescription>
+ * ```
+ */
+export declare const ListDescription: {
+    ({ ref: forwardedRef, ...props }: ListDescriptionProps): React.ReactNode;
+    displayName: string;
+};

package/dist/list/ListItem.d.cts

@@ -1,12 +1,19 @@
 import * as React from 'react';
 import type { ListItemProps } from './types.cjs';
 /**
- * Renders `<li>`. An `icon` — its own or inherited from the parent {@link
- * List} — renders as an `indicator` part and switches the native marker off.
+ * Renders an `<li>` whose `icon` — own or inherited from the parent {@link List} — renders as an `indicator` part with the native marker off; inside `as="dl"` it is instead the bare wrapper around one {@link ListTerm}/{@link ListDescription} pair.
  *
  * @example
  * ```tsx
  * <ListItem icon={<CheckIcon />}>Done</ListItem>
+ *
+ * <ListItem style={{ display: 'contents' }}>
+ *   <ListTerm>Region</ListTerm>
+ *   <ListDescription>eu-west-1</ListDescription>
+ * </ListItem>
  * ```
  */
-export declare const ListItem: React.ForwardRefExoticComponent<Omit<ListItemProps, "ref"> & React.RefAttributes<HTMLLIElement>>;
+export declare const ListItem: {
+    ({ icon, style, children, ref: forwardedRef, ...props }: ListItemProps): React.ReactNode;
+    displayName: string;
+};

package/dist/list/ListItem.d.ts

@@ -1,12 +1,19 @@
 import * as React from 'react';
 import type { ListItemProps } from './types.js';
 /**
- * Renders `<li>`. An `icon` — its own or inherited from the parent {@link
- * List} — renders as an `indicator` part and switches the native marker off.
+ * Renders an `<li>` whose `icon` — own or inherited from the parent {@link List} — renders as an `indicator` part with the native marker off; inside `as="dl"` it is instead the bare wrapper around one {@link ListTerm}/{@link ListDescription} pair.
  *
  * @example
  * ```tsx
  * <ListItem icon={<CheckIcon />}>Done</ListItem>
+ *
+ * <ListItem style={{ display: 'contents' }}>
+ *   <ListTerm>Region</ListTerm>
+ *   <ListDescription>eu-west-1</ListDescription>
+ * </ListItem>
  * ```
  */
-export declare const ListItem: React.ForwardRefExoticComponent<Omit<ListItemProps, "ref"> & React.RefAttributes<HTMLLIElement>>;
+export declare const ListItem: {
+    ({ icon, style, children, ref: forwardedRef, ...props }: ListItemProps): React.ReactNode;
+    displayName: string;
+};

package/dist/list/ListTerm.d.cts

@@ -0,0 +1,14 @@
+import type * as React from 'react';
+import type { ListTermProps } from './types.cjs';
+/**
+ * The term half of a description-list pair, rendering a `<dt>` that the following {@link ListDescription} elements describe.
+ *
+ * @example
+ * ```tsx
+ * <ListTerm>Created</ListTerm>
+ * ```
+ */
+export declare const ListTerm: {
+    ({ ref: forwardedRef, ...props }: ListTermProps): React.ReactNode;
+    displayName: string;
+};

package/dist/list/ListTerm.d.ts

@@ -0,0 +1,14 @@
+import type * as React from 'react';
+import type { ListTermProps } from './types.js';
+/**
+ * The term half of a description-list pair, rendering a `<dt>` that the following {@link ListDescription} elements describe.
+ *
+ * @example
+ * ```tsx
+ * <ListTerm>Created</ListTerm>
+ * ```
+ */
+export declare const ListTerm: {
+    ({ ref: forwardedRef, ...props }: ListTermProps): React.ReactNode;
+    displayName: string;
+};

package/dist/list/index.d.cts

@@ -1,3 +1,5 @@
 export { List } from './List.cjs';
 export { ListItem } from './ListItem.cjs';
-export type { ListItemProps, ListProps, Space } from './types.cjs';
+export { ListTerm } from './ListTerm.cjs';
+export { ListDescription } from './ListDescription.cjs';
+export type { ListDescriptionProps, ListEntry, ListItemProps, ListOrientation, ListProps, ListTermProps, Space, } from './types.cjs';

package/dist/list/index.d.ts

@@ -1,3 +1,5 @@
 export { List } from './List.js';
 export { ListItem } from './ListItem.js';
-export type { ListItemProps, ListProps, Space } from './types.js';
+export { ListTerm } from './ListTerm.js';
+export { ListDescription } from './ListDescription.js';
+export type { ListDescriptionProps, ListEntry, ListItemProps, ListOrientation, ListProps, ListTermProps, Space, } from './types.js';

package/dist/list/types.d.cts

@@ -2,55 +2,87 @@ import type * as React from 'react';
 import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
 import type { Space } from '../utils/resolveSpace.cjs';
 export type { Space };
-/** Tag names {@link List} accepts via `as`. `dl` is for styling only — `<li>` children are still expected. */
+/** Tag names {@link List} accepts via `as`. Under `dl` each item is a term/description pair rather than an `<li>`. */
 export type ListTag = 'ul' | 'ol' | 'dl';
-/** @internal The default marker icon, distributed from {@link List} to every {@link ListItem}. Not part of the public API. */
+/** Layout axis of a description list's pairs, emitted as `data-orientation`. */
+export type ListOrientation = 'horizontal' | 'vertical';
+/** One entry of {@link ListProps.items} — a single term/description pair, read only under `as="dl"`. */
+export interface ListEntry {
+    /** The term half of the pair, rendered into a derived `ListTerm` (`<dt>`). */
+    label: React.ReactNode;
+    /** The description half of the pair, rendered into a derived `ListDescription` (`<dd>`). */
+    value: React.ReactNode;
+}
+/** @internal The element choice and default marker icon, distributed from {@link List} to every {@link ListItem}. */
 export interface ListContextValue {
     icon: React.ReactNode;
+    /** The element the list root rendered, which decides whether an item is an `<li>` or a pair wrapper. */
+    as: ListTag;
 }
 /** Props for the {@link List} container root element. */
 export interface ListProps extends PrimitivePropsWithRef<'ul'> {
     /**
-     * Element name to render, from the list's own tag allowlist.
+     * Element name to render, from the list's own tag allowlist; `dl` turns each item into a term/description pair.
      * @default 'ul'
      */
-    as?: ListTag;
+    as?: ListTag | undefined;
+    /**
+     * Layout axis of the pairs, emitted as `data-orientation` for the stylesheet to lay out; read only under `as="dl"`.
+     * @default 'horizontal'
+     */
+    orientation?: ListOrientation | undefined;
+    /**
+     * Vertical rhythm rung the skin reads, mirrored to `data-density` on the root.
+     * @default undefined — the skin's own default density.
+     */
+    density?: 'compact' | 'comfortable' | (string & {}) | undefined;
+    /**
+     * Term/description pairs the list derives one `ListItem` from each; read only under `as="dl"` and ignored when `children` is given.
+     * @default undefined — nothing is derived.
+     */
+    items?: ListEntry[] | undefined;
     /**
      * `false` removes the marker and sets `role="list"` on the container, since Safari/VoiceOver otherwise drops list semantics.
      * @default true
      */
-    markers?: boolean;
+    markers?: boolean | undefined;
     /**
      * Gap between items, from the spacing scale.
      * @default undefined — no inline declaration.
      */
-    spacing?: Space;
+    spacing?: Space | undefined;
     /**
      * Starting number, passed through to `<ol start>`. Ignored unless `as="ol"`.
      * @default undefined — browser default numbering.
      */
-    start?: number;
+    start?: number | undefined;
     /**
      * Reverses the numbering direction, passed through to `<ol reversed>`. Ignored unless `as="ol"`.
      * @default false
      */
-    reversed?: boolean;
+    reversed?: boolean | undefined;
     /**
      * Default marker icon for every item, overridable per {@link ListItem}.
      * @default undefined — the native marker is used.
      */
-    icon?: React.ReactNode;
+    icon?: React.ReactNode | undefined;
+}
+/** Props for the {@link ListTerm}, the term half of a description-list pair. */
+export interface ListTermProps extends PrimitivePropsWithRef<'dt'> {
+}
+/** Props for the {@link ListDescription}, the description half of a description-list pair. */
+export interface ListDescriptionProps extends PrimitivePropsWithRef<'dd'> {
 }
-/** Props for a single {@link ListItem} within a list. */
+/** Props for a single {@link ListItem} within a list — an `<li>`, or the pair wrapper under `as="dl"`. */
 export interface ListItemProps extends PrimitivePropsWithRef<'li'> {
     /**
      * Ordinal value, passed through to `<li value>`. Only meaningful inside an `<ol>`.
      * @default undefined — sequential numbering.
      */
-    value?: number;
+    value?: number | undefined;
     /**
      * Marker icon for this item, overriding the List's own `icon`.
      * @default undefined — the List's `icon` is used, if any.
      */
-    icon?: React.ReactNode;
+    icon?: React.ReactNode | undefined;
 }

package/dist/list/types.d.ts

@@ -2,55 +2,87 @@ import type * as React from 'react';
 import type { PrimitivePropsWithRef } from '../utils/primitive.js';
 import type { Space } from '../utils/resolveSpace.js';
 export type { Space };
-/** Tag names {@link List} accepts via `as`. `dl` is for styling only — `<li>` children are still expected. */
+/** Tag names {@link List} accepts via `as`. Under `dl` each item is a term/description pair rather than an `<li>`. */
 export type ListTag = 'ul' | 'ol' | 'dl';
-/** @internal The default marker icon, distributed from {@link List} to every {@link ListItem}. Not part of the public API. */
+/** Layout axis of a description list's pairs, emitted as `data-orientation`. */
+export type ListOrientation = 'horizontal' | 'vertical';
+/** One entry of {@link ListProps.items} — a single term/description pair, read only under `as="dl"`. */
+export interface ListEntry {
+    /** The term half of the pair, rendered into a derived `ListTerm` (`<dt>`). */
+    label: React.ReactNode;
+    /** The description half of the pair, rendered into a derived `ListDescription` (`<dd>`). */
+    value: React.ReactNode;
+}
+/** @internal The element choice and default marker icon, distributed from {@link List} to every {@link ListItem}. */
 export interface ListContextValue {
     icon: React.ReactNode;
+    /** The element the list root rendered, which decides whether an item is an `<li>` or a pair wrapper. */
+    as: ListTag;
 }
 /** Props for the {@link List} container root element. */
 export interface ListProps extends PrimitivePropsWithRef<'ul'> {
     /**
-     * Element name to render, from the list's own tag allowlist.
+     * Element name to render, from the list's own tag allowlist; `dl` turns each item into a term/description pair.
      * @default 'ul'
      */
-    as?: ListTag;
+    as?: ListTag | undefined;
+    /**
+     * Layout axis of the pairs, emitted as `data-orientation` for the stylesheet to lay out; read only under `as="dl"`.
+     * @default 'horizontal'
+     */
+    orientation?: ListOrientation | undefined;
+    /**
+     * Vertical rhythm rung the skin reads, mirrored to `data-density` on the root.
+     * @default undefined — the skin's own default density.
+     */
+    density?: 'compact' | 'comfortable' | (string & {}) | undefined;
+    /**
+     * Term/description pairs the list derives one `ListItem` from each; read only under `as="dl"` and ignored when `children` is given.
+     * @default undefined — nothing is derived.
+     */
+    items?: ListEntry[] | undefined;
     /**
      * `false` removes the marker and sets `role="list"` on the container, since Safari/VoiceOver otherwise drops list semantics.
      * @default true
      */
-    markers?: boolean;
+    markers?: boolean | undefined;
     /**
      * Gap between items, from the spacing scale.
      * @default undefined — no inline declaration.
      */
-    spacing?: Space;
+    spacing?: Space | undefined;
     /**
      * Starting number, passed through to `<ol start>`. Ignored unless `as="ol"`.
      * @default undefined — browser default numbering.
      */
-    start?: number;
+    start?: number | undefined;
     /**
      * Reverses the numbering direction, passed through to `<ol reversed>`. Ignored unless `as="ol"`.
      * @default false
      */
-    reversed?: boolean;
+    reversed?: boolean | undefined;
     /**
      * Default marker icon for every item, overridable per {@link ListItem}.
      * @default undefined — the native marker is used.
      */
-    icon?: React.ReactNode;
+    icon?: React.ReactNode | undefined;
+}
+/** Props for the {@link ListTerm}, the term half of a description-list pair. */
+export interface ListTermProps extends PrimitivePropsWithRef<'dt'> {
+}
+/** Props for the {@link ListDescription}, the description half of a description-list pair. */
+export interface ListDescriptionProps extends PrimitivePropsWithRef<'dd'> {
 }
-/** Props for a single {@link ListItem} within a list. */
+/** Props for a single {@link ListItem} within a list — an `<li>`, or the pair wrapper under `as="dl"`. */
 export interface ListItemProps extends PrimitivePropsWithRef<'li'> {
     /**
      * Ordinal value, passed through to `<li value>`. Only meaningful inside an `<ol>`.
      * @default undefined — sequential numbering.
      */
-    value?: number;
+    value?: number | undefined;
     /**
      * Marker icon for this item, overriding the List's own `icon`.
      * @default undefined — the List's `icon` is used, if any.
      */
-    icon?: React.ReactNode;
+    icon?: React.ReactNode | undefined;
 }

package/dist/listbox/Listbox.cjs

@@ -1 +1,2 @@
-"use strict";var ze=Object.create;var T=Object.defineProperty;var Fe=Object.getOwnPropertyDescriptor;var Ue=Object.getOwnPropertyNames;var _e=Object.getPrototypeOf,qe=Object.prototype.hasOwnProperty;var Ze=(t,o)=>{for(var a in o)T(t,a,{get:o[a],enumerable:!0})},ae=(t,o,a,r)=>{if(o&&typeof o=="object"||typeof o=="function")for(let s of Ue(o))!qe.call(t,s)&&s!==a&&T(t,s,{get:()=>o[s],enumerable:!(r=Fe(o,s))||r.enumerable});return t};var P=(t,o,a)=>(a=t!=null?ze(_e(t)):{},ae(o||!t||!t.__esModule?T(a,"default",{value:t,enumerable:!0}):a,t)),Be=t=>ae(T({},"__esModule",{value:!0}),t);var Xe={};Ze(Xe,{Listbox:()=>Ee,ListboxGroup:()=>M,ListboxGroupProvider:()=>ce,ListboxItem:()=>G,ListboxItemIndicator:()=>S,ListboxItemProvider:()=>be,ListboxLabel:()=>A,ListboxProvider:()=>Oe,OPTION_SELECTOR:()=>Y,useListboxContext:()=>v,useListboxGroupContext:()=>Q,useListboxItemContext:()=>X});module.exports=Be(Xe);var n=P(require("react"),1),Pe=require("../utils/createContext.cjs"),ve=require("../utils/part.cjs"),N=require("../utils/primitive.cjs"),Ve=require("../utils/useControllableState.cjs"),De=require("../utils/useRovingFocus.cjs"),y=require("../utils/useSelection.cjs"),z=require("../utils/useTypeahead.cjs");var H=P(require("react"),1),ie=require("../utils/createContext.cjs"),ne=require("../utils/part.cjs"),le=require("../utils/primitive.cjs"),J=require("react/jsx-runtime"),[ce,Q]=(0,ie.createSafeContext)("ListboxGroup"),M=H.forwardRef((t,o)=>{let a=H.useId();return(0,J.jsx)(ce,{labelId:a,children:(0,J.jsx)(le.Primitive.div,{role:"group","aria-labelledby":a,...t,...(0,ne.skdxPart)("listbox","group",t.className),ref:o})})});M.displayName="ListboxGroup";var ue=P(require("react"),1),fe=require("../utils/createContext.cjs"),me=require("../utils/part.cjs"),I=require("../utils/primitive.cjs"),de=require("../utils/useRovingFocus.cjs");var W=require("react/jsx-runtime"),[be,X]=(0,fe.createSafeContext)("ListboxItem"),G=ue.forwardRef(({value:t,disabled:o=!1,textValue:a,posInSet:r,setSize:s,...p},g)=>{let b=v("ListboxItem"),m=o||b.disabled,k=b.isSelected(t),D=d=>{m||b.selectItem(t,d)};return(0,W.jsx)(be,{value:t,selected:k,disabled:m,children:(0,W.jsx)(I.Primitive.div,{role:"option","aria-selected":k,"aria-disabled":m||void 0,"data-value":t,"data-text-value":a,"data-state":k?"checked":"unchecked","data-disabled":m?"":void 0,"aria-posinset":r,"aria-setsize":s,tabIndex:(0,de.rovingTabIndex)(b.activeValue!==null,b.activeValue===t,m),...p,...(0,me.skdxPart)("listbox","item",p.className),ref:g,onClick:(0,I.composeEventHandlers)(p.onClick,()=>D("pointer")),onFocus:(0,I.composeEventHandlers)(p.onFocus,()=>{m||b.setActiveValue(t)}),onPointerEnter:(0,I.composeEventHandlers)(p.onPointerEnter,d=>{b.focusOnHover&&!m&&d.currentTarget.focus()}),onKeyDown:(0,I.composeEventHandlers)(p.onKeyDown,d=>{d.key!==" "&&d.key!=="Enter"||d.key===" "&&d.shiftKey&&b.multiple||(d.preventDefault(),D("keyboard"))})})})});G.displayName="ListboxItem";var xe=P(require("react"),1),pe=require("../utils/part.cjs"),Le=require("../utils/primitive.cjs");var ye=require("react/jsx-runtime"),S=xe.forwardRef(({forceMount:t,...o},a)=>{let r=X("ListboxItemIndicator");return t||r.selected?(0,ye.jsx)(Le.Primitive.span,{"aria-hidden":!0,...o,...(0,pe.skdxPart)("listbox","item-indicator",o.className),ref:a}):null});S.displayName="ListboxItemIndicator";var ge=P(require("react"),1),he=require("../utils/part.cjs"),Re=require("../utils/primitive.cjs");var Ie=require("react/jsx-runtime"),A=ge.forwardRef((t,o)=>{let a=Q("ListboxLabel");return(0,Ie.jsx)(Re.Primitive.div,{id:a.labelId,...t,...(0,he.skdxPart)("listbox","label",t.className),ref:o})});A.displayName="ListboxLabel";var x=require("react/jsx-runtime"),Je=t=>"options"in t,ke=({options:t,renderOption:o})=>{let a=v("Listbox"),r=s=>(0,x.jsxs)(G,{value:s.value,disabled:s.disabled,textValue:s.label,children:[(0,x.jsx)(S,{children:"\u2713"}),o?o(s,{selected:a.isSelected(s.value)}):s.label??s.value]},s.value);return(0,x.jsx)(x.Fragment,{children:t.map(s=>Je(s)?(0,x.jsxs)(M,{children:[(0,x.jsx)(A,{children:s.label}),s.options.map(r)]},s.label):r(s))})};var w=require("react/jsx-runtime");function Qe(t,o){return t.length===o.length&&t.every((a,r)=>a===o[r])}var Y='[role="option"]:not([data-disabled])',Ce=10,[Oe,v]=(0,Pe.createSafeContext)("Listbox");function V(t){return Array.from(t.querySelectorAll(Y))}function We(t){return t.getAttribute("data-text-value")??t.textContent??""}function K(t){return t.getAttribute("data-value")??""}var Ee=n.forwardRef(({value:t,defaultValue:o,onValueChange:a,multiple:r=!1,disabled:s=!1,allowSelectAll:p=!0,orientation:g="vertical",focusOnHover:b=!1,disallowEmptySelection:m=!1,options:k,renderOption:D,children:d,...F},O)=>{let Te=d??(0,w.jsx)(ke,{options:k??[],renderOption:D}),h=n.useRef(null),[U,$]=n.useState(null),j=n.useRef("programmatic"),ee=n.useRef(null),He=n.useMemo(()=>t===void 0?void 0:(0,y.toSelectionValues)(t,{multiple:r,label:"Listbox value"}),[t,r]),[u=[],te]=(0,Ve.useControllableState)({prop:He,defaultProp:(0,y.toSelectionValues)(o,{multiple:r,label:"Listbox defaultValue"}),onChange:e=>a?.({value:e,previousValue:ee.current,reason:j.current,selectedValue:(0,y.selectedValueOf)(e)})}),C=n.useRef(u);C.current=u;let _=n.useCallback(e=>u.includes(e),[u]),E=n.useCallback((e,i)=>{Qe(e,C.current)||(j.current=i,ee.current=C.current.length===0?null:C.current,te(e))},[te]),oe=n.useCallback((e,i)=>E((0,y.nextSelection)(C.current,e,r),i),[r,E]),q=n.useCallback((e,i)=>E((0,y.toSelectionValues)(e,{multiple:r,label:"Listbox value"}),i),[r,E]),Z=n.useRef(null),Me=(0,De.useRovingFocus)({orientation:g,loop:!1,itemSelector:Y,typeahead:!1}),Ge=(0,z.useTypeahead)(n.useCallback(()=>h.current?V(h.current).map(We):[],[]));n.useLayoutEffect(()=>{if(U!==null)return;let e=h.current;if(!e)return;let i=V(e),l=(i.find(L=>_(L.getAttribute("data-value")??""))??i[0])?.getAttribute("data-value");l&&$(l)},[U,_]);let re=n.useCallback((e,i)=>{r&&m&&u.length===1&&u[0]===e||(Z.current=e,oe(e,i))},[oe,r,m,u]),Se=()=>(u.length===0&&(Z.current=null),Z.current),B=(e,i,c)=>{let l=e.slice(i,c+1).map(K);q([...u,...l.filter(L=>!u.includes(L))],"keyboard")},Ae=e=>{if(!r)return!1;let i=h.current;if(!i)return!1;let c=V(i),l=c.indexOf(e.target);if(l===-1)return!1;let L=g==="horizontal"?"ArrowRight":"ArrowDown",we=g==="horizontal"?"ArrowLeft":"ArrowUp";if((e.key===L||e.key===we)&&e.shiftKey){e.preventDefault();let f=c[l+(e.key===L?1:-1)];return f&&(f.focus(),re(K(f),"keyboard")),!0}if(e.key===" "&&e.shiftKey){e.preventDefault();let f=c.findIndex(Ne=>K(Ne)===Se()),se=Math.min(f===-1?l:f,l),R=Math.max(f===-1?l:f,l);return B(c,se,R),!0}if(e.ctrlKey&&e.shiftKey&&(e.key==="Home"||e.key==="End"))return e.preventDefault(),e.key==="Home"?B(c,0,l):B(c,l,c.length-1),!0;if(p&&(e.ctrlKey||e.metaKey)&&e.key.toLowerCase()==="a"){e.preventDefault();let f=c.map(K);return f.every(R=>u.includes(R))?r&&m||q(u.filter(R=>!f.includes(R)),"keyboard"):q([...u,...f.filter(R=>!u.includes(R))],"keyboard"),!0}return!1},Ke=e=>{if(e.key!=="PageUp"&&e.key!=="PageDown")return!1;let i=h.current;if(!i)return!1;let c=V(i),l=c.indexOf(e.target);if(l===-1)return!1;e.preventDefault();let L=e.key==="PageDown"?Ce:-Ce;return c[Math.min(c.length-1,Math.max(0,l+L))]?.focus(),!0};return(0,w.jsx)(Oe,{multiple:r,selectedValues:u,isSelected:_,selectItem:re,disabled:s,activeValue:U,setActiveValue:$,focusOnHover:b,children:(0,w.jsx)(N.Primitive.div,{role:"listbox","aria-multiselectable":r?!0:void 0,"aria-disabled":s||void 0,"aria-orientation":g,"data-multiple":r?"":void 0,"data-disabled":s?"":void 0,"data-orientation":g,...F,...(0,ve.skdxPart)("listbox","root",F.className),ref:e=>{h.current=e,typeof O=="function"?O(e):O&&(O.current=e)},onKeyDown:(0,N.composeEventHandlers)(F.onKeyDown,e=>{if(Ae(e)||Ke(e)||(Me(e),e.defaultPrevented||!(0,z.isTypeaheadKey)(e)))return;let i=h.current;if(!i)return;let c=V(i),l=Ge(e.key,c.indexOf(e.target));l!==-1&&(e.preventDefault(),c[l].focus())}),children:Te})})});Ee.displayName="Listbox";0&&(module.exports={Listbox,ListboxGroup,ListboxGroupProvider,ListboxItem,ListboxItemIndicator,ListboxItemProvider,ListboxLabel,ListboxProvider,OPTION_SELECTOR,useListboxContext,useListboxGroupContext,useListboxItemContext});
+'use client';
+"use strict";var ke=Object.create;var M=Object.defineProperty;var Pe=Object.getOwnPropertyDescriptor;var Ce=Object.getOwnPropertyNames;var ve=Object.getPrototypeOf,Me=Object.prototype.hasOwnProperty;var Ke=(e,r)=>{for(var t in r)M(e,t,{get:r[t],enumerable:!0})},Y=(e,r,t,o)=>{if(r&&typeof r=="object"||typeof r=="function")for(let n of Ce(r))!Me.call(e,n)&&n!==t&&M(e,n,{get:()=>r[n],enumerable:!(o=Pe(r,n))||o.enumerable});return e};var Te=(e,r,t)=>(t=e!=null?ke(ve(e)):{},Y(r||!e||!e.__esModule?M(t,"default",{value:e,enumerable:!0}):t,e)),Ae=e=>Y(M({},"__esModule",{value:!0}),e);var Ue={};Ke(Ue,{Listbox:()=>ge,ListboxGroup:()=>T,ListboxItem:()=>A,ListboxItemIndicator:()=>O,ListboxItemProvider:()=>re,ListboxLabel:()=>H,ListboxProvider:()=>he,OPTION_SELECTOR:()=>w,useListboxContext:()=>S,useListboxItemContext:()=>q});module.exports=Ae(Ue);var s=Te(require("react"),1),be=require("../utils/appearance.cjs"),pe=require("../utils/createContext.cjs"),xe=require("../utils/direction.cjs"),Le=require("../utils/part.cjs"),N=require("../utils/primitive.cjs"),ye=require("../utils/useControllableState.cjs"),G=require("../utils/useRovingFocus.cjs"),p=require("../utils/useSelection.cjs"),z=require("../utils/useTypeahead.cjs");var me=require("../utils/Glyph.cjs");var K=require("../utils/menuGroup.cjs"),$=require("../utils/part.cjs"),j=require("../utils/primitive.cjs"),U=require("react/jsx-runtime"),T=({ref:e,...r})=>{let{labelId:t,context:o}=(0,K.useMenuGroupLabel)();return(0,U.jsx)(K.MenuGroupProvider,{...o,children:(0,U.jsx)(j.Primitive.div,{role:"group","aria-labelledby":r["aria-label"]===void 0?t:void 0,...r,...(0,$.skdxPart)("listbox","group",r.className),ref:e})})};T.displayName="ListboxGroup";var ee=require("../utils/createContext.cjs"),te=require("../utils/part.cjs"),y=require("../utils/primitive.cjs"),oe=require("../utils/useRovingFocus.cjs");var _=require("react/jsx-runtime"),[re,q]=(0,ee.createSafeContext)("ListboxItem"),A=({value:e,disabled:r=!1,textValue:t,posInSet:o,setSize:n,ref:l,...u})=>{let a=S("ListboxItem"),c=r||a.disabled,f=a.isSelected(e),h=m=>{c||a.selectItem(e,m)};return(0,_.jsx)(re,{value:e,selected:f,disabled:c,children:(0,_.jsx)(y.Primitive.div,{role:"option","aria-selected":f,"aria-disabled":c||void 0,"data-value":e,"data-text-value":t,"data-state":f?"checked":"unchecked","data-disabled":c?"":void 0,"aria-posinset":o,"aria-setsize":n,tabIndex:(0,oe.rovingTabIndex)(a.activeValue!==null,a.activeValue===e,c),...u,...(0,te.skdxPart)("listbox","item",u.className),ref:l,onClick:(0,y.composeEventHandlers)(u.onClick,()=>h("pointer")),onFocus:(0,y.composeEventHandlers)(u.onFocus,()=>{c||a.setActiveValue(e)}),onPointerEnter:(0,y.composeEventHandlers)(u.onPointerEnter,m=>{a.focusOnHover&&!c&&m.currentTarget.focus()}),onKeyDown:(0,y.composeEventHandlers)(u.onKeyDown,m=>{m.key!==" "&&m.key!=="Enter"||m.key===" "&&m.shiftKey&&a.multiple||(m.preventDefault(),h("keyboard"))})})})};A.displayName="ListboxItem";var ne=require("../utils/part.cjs"),ae=require("../utils/primitive.cjs");var ie=require("react/jsx-runtime"),O=({forceMount:e,ref:r,...t})=>{let o=q("ListboxItemIndicator");return e||o.selected?(0,ie.jsx)(ae.Primitive.span,{"aria-hidden":!0,...t,...(0,ne.skdxPart)("listbox","item-indicator",t.className),ref:r}):null};O.displayName="ListboxItemIndicator";var se=require("../utils/menuGroup.cjs"),le=require("../utils/part.cjs"),ce=require("../utils/primitive.cjs"),ue=require("react/jsx-runtime"),H=({ref:e,...r})=>{let t=(0,se.useMenuLabelId)();return(0,ue.jsx)(ce.Primitive.div,{id:t,...r,...(0,le.skdxPart)("listbox","label",r.className),ref:e})};H.displayName="ListboxLabel";var b=require("react/jsx-runtime"),Oe=e=>"options"in e,de=({options:e,renderOption:r})=>{let t=S("Listbox"),o=n=>(0,b.jsxs)(A,{value:n.value,disabled:n.disabled,textValue:n.label,children:[(0,b.jsx)(O,{children:(0,b.jsx)(me.Glyph,{name:"check"})}),r?r(n,{selected:t.isSelected(n.value)}):n.label??n.value]},n.value);return(0,b.jsx)(b.Fragment,{children:e.map(n=>Oe(n)?(0,b.jsxs)(T,{children:[(0,b.jsx)(H,{children:n.label}),n.options.map(o)]},n.label):o(n))})};var D=require("react/jsx-runtime");function He(e,r){return e.length===r.length&&e.every((t,o)=>t===r[o])}var w='[role="option"]:not([data-disabled])',fe=10,[he,S]=(0,pe.createSafeContext)("Listbox");function V(e){return Array.from(e.querySelectorAll(w))}function De(e){return e.getAttribute("data-text-value")??e.textContent??""}function k(e){return e.getAttribute("data-value")??""}function we(e,r){if(e.key!=="PageUp"&&e.key!=="PageDown"||!r)return!1;let t=V(r),o=t.indexOf(e.target);if(o===-1)return!1;e.preventDefault();let n=e.key==="PageDown"?fe:-fe;return t[Math.min(t.length-1,Math.max(0,o+n))]?.focus(),!0}function X(e,r,t,o){let n=e.slice(r,t+1).map(k);o.setSelection([...o.selectedValues,...n.filter(l=>!o.selectedValues.includes(l))],"keyboard")}function Ne(e,r,t,o,n){let l=n.orientation==="horizontal"?"ArrowRight":"ArrowDown",u=n.orientation==="horizontal"?"ArrowLeft":"ArrowUp",a=(0,xe.directionalKey)(e.key,o);if(a!==l&&a!==u||!e.shiftKey)return!1;e.preventDefault();let c=r[t+(a===l?1:-1)];return c&&(c.focus(),n.selectItemAndAnchor(k(c),"keyboard")),!0}function Ge(e,r,t,o){if(e.key!==" "||!e.shiftKey)return!1;e.preventDefault();let n=r.findIndex(a=>k(a)===o.readAnchor()),l=Math.min(n===-1?t:n,t),u=Math.max(n===-1?t:n,t);return X(r,l,u,o),!0}function ze(e,r,t,o){return!e.ctrlKey||!e.shiftKey||e.key!=="Home"&&e.key!=="End"?!1:(e.preventDefault(),e.key==="Home"?X(r,0,t,o):X(r,t,r.length-1,o),!0)}function Fe(e,r,t){if(!t.allowSelectAll||!(e.ctrlKey||e.metaKey)||e.key.toLowerCase()!=="a")return!1;e.preventDefault();let o=r.map(k);return o.every(l=>t.selectedValues.includes(l))?t.multiple&&t.disallowEmptySelection||t.setSelection(t.selectedValues.filter(l=>!o.includes(l)),"keyboard"):t.setSelection([...t.selectedValues,...o.filter(l=>!t.selectedValues.includes(l))],"keyboard"),!0}function We(e,r,t){if(!t.multiple||!r)return!1;let o=V(r),n=o.indexOf(e.target);return n===-1?!1:Ne(e,o,n,r,t)||Ge(e,o,n,t)||ze(e,o,n,t)||Fe(e,o,t)}function Je({value:e,defaultValue:r,onValueChange:t,multiple:o}){let n=s.useRef("programmatic"),l=s.useRef([]),u=s.useMemo(()=>e===void 0?void 0:(0,p.toSelectionValues)(e,{multiple:o,label:"Listbox value"}),[e,o]),[a=[],c]=(0,ye.useControllableState)({prop:u,defaultProp:(0,p.toSelectionValues)(r,{multiple:o,label:"Listbox defaultValue"}),onChange:d=>t?.({value:d,previousValue:l.current,reason:n.current,selectedValue:(0,p.selectedValueOf)(d)})}),f=s.useRef(a);s.useInsertionEffect(()=>{f.current=a});let h=s.useCallback(d=>a.includes(d),[a]),m=s.useCallback((d,x)=>{He(d,f.current)||(n.current=x,l.current=f.current,c(d))},[c]),g=s.useCallback((d,x)=>m((0,p.nextSelection)(f.current,d,o),x),[o,m]);return{selectedValues:a,isSelected:h,selectItem:g,setSelection:(d,x)=>m((0,p.toSelectionValues)(d,{multiple:o,label:"Listbox value"}),x)}}var ge=({value:e,defaultValue:r,onValueChange:t,multiple:o=!1,disabled:n=!1,allowSelectAll:l=!0,orientation:u="vertical",focusOnHover:a=!1,disallowEmptySelection:c=!1,options:f,renderOption:h,children:m,ref:g,density:Z,shape:d,size:x,...P})=>{let Ee=m??(0,D.jsx)(de,{options:f??[],renderOption:h}),L=s.useRef(null),[C,F]=s.useState(null),{selectedValues:E,isSelected:W,selectItem:B,setSelection:Re}=Je({value:e,defaultValue:r,onValueChange:t,multiple:o}),J=s.useRef(null),Ie=(0,G.useRovingFocus)({orientation:u,loop:!1,itemSelector:w,typeahead:!1}),Se=(0,z.useTypeahead)(s.useCallback(()=>{let i=L.current;return i?V(i).map(De):[]},[]));(0,G.useRovingTabStop)(L,w,"data-value",C,F),s.useLayoutEffect(()=>{if(C!==null)return;let i=L.current;if(!i)return;let I=V(i).find(v=>W(k(v)))?.getAttribute("data-value");I&&F(I)},[C,W]);let Q=s.useCallback((i,R)=>{o&&c&&E.length===1&&E[0]===i||(J.current=i,B(i,R))},[B,o,c,E]),Ve={multiple:o,orientation:u,allowSelectAll:l,disallowEmptySelection:c,selectedValues:E,selectItemAndAnchor:Q,setSelection:Re,readAnchor:()=>(E.length===0&&(J.current=null),J.current)};return(0,D.jsx)(he,{multiple:o,selectedValues:E,isSelected:W,selectItem:Q,disabled:n,activeValue:C,setActiveValue:F,focusOnHover:a,children:(0,D.jsx)(N.Primitive.div,{role:"listbox","aria-multiselectable":o?!0:void 0,"aria-disabled":n||void 0,"aria-orientation":u,"data-multiple":o?"":void 0,"data-disabled":n?"":void 0,"data-orientation":u,...P,...(0,be.appearanceAttrs)({density:Z,shape:d,size:x},P),...(0,Le.skdxPart)("listbox","root",P.className),ref:i=>{L.current=i,typeof g=="function"?g(i):g&&(g.current=i)},onKeyDown:(0,N.useComposedEventHandlers)(P.onKeyDown,i=>{if(We(i,L.current,Ve)||we(i,L.current)||(Ie(i),i.defaultPrevented||!(0,z.isTypeaheadKey)(i)))return;let R=L.current;if(!R)return;let I=V(R),v=Se(i.key,I.indexOf(i.target));v!==-1&&(i.preventDefault(),I[v].focus())}),children:Ee})})};ge.displayName="Listbox";0&&(module.exports={Listbox,ListboxGroup,ListboxItem,ListboxItemIndicator,ListboxItemProvider,ListboxLabel,ListboxProvider,OPTION_SELECTOR,useListboxContext,useListboxItemContext});