@skdx/react 0.28.0 → 0.30.0

package/dist/utils/part.d.ts

@@ -1,35 +1,22 @@
+/**
+ * Joins the truthy class-name values with single spaces, skipping the rest.
+ *
+ * @internal
+ */
+export declare function cx(...values: Array<string | false | null | undefined>): string;
 /** The attribute bag {@link skdxPart} returns, spread onto a part's root element. */
 export interface SkdxPartAttributes {
     className: string;
     'data-part': string;
-    'data-skdx-component'?: string;
+    'data-skdx-component'?: string | undefined;
 }
 /**
- * Builds the class and `data-*` hooks for one part of one component.
- *
- * Spread this **after** the consumer's `{...props}` so the merged `className`
- * wins over the raw one — otherwise a consumer passing `className` would
- * silently delete the part's own class and with it every rule in the skin:
- *
- * ```tsx
- * <Primitive.button
- *   type="button"
- *   {...props}
- *   {...skdxPart('button', 'root', props.className)}
- *   ref={forwardedRef}
- * />
- * ```
- *
- * The consumer's class is appended rather than prepended, but order in the
- * attribute is not what resolves a conflict — specificity and source order in
- * the *stylesheet* are. It is appended because that reads as "ours, then
- * theirs" in the DOM inspector, which is the order a person debugging an
- * override expects to see.
+ * Builds the class and `data-*` hooks for one part of one component; spread after the consumer's `{...props}` so the merged `className` wins instead of being silently deleted.
  *
  * @param component - Family name in kebab-case, e.g. `'button'`, `'tree-select'`. Becomes the `skdx-` class stem and, on the root, `data-skdx-component`.
  * @param part - Part name from the family's `styling.cssParts`, or `'root'`.
  * @param className - The consumer's `className`, merged in. Pass `props.className`.
- * @param inheritedComponent - A `data-skdx-component` already on the incoming props, which wins. Only a component that can be rendered *as* another family's root needs this; see the note on the parameter in {@link skdxPart}'s body.
+ * @param inheritedComponent - A `data-skdx-component` already on the incoming props, which wins.
  *
  * @example
  * ```tsx

package/dist/utils/part.js

@@ -1 +1,2 @@
-function o(...s){let t="";for(let r of s)r&&(t=t?`${t} ${r}`:r);return t}function d(s,t,r,i){let n=t==="root",e=n?`skdx-${s}`:`skdx-${s}__${t}`,a={className:o(e,r),"data-part":t};return n&&(a["data-skdx-component"]=i??s),a}export{d as skdxPart};
+'use client';
+function o(...r){let t="";for(let s of r)s&&(t=t?`${t} ${s}`:s);return t}function d(r,t,s,e){let n=t==="root",i=n?`skdx-${r}`:`skdx-${r}__${t}`,a={className:o(i,s),"data-part":t};return n&&(a["data-skdx-component"]=e??r),a}export{o as cx,d as skdxPart};

package/dist/utils/passThrough.cjs

@@ -1 +1,2 @@
-"use strict";var s=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var o=Object.getOwnPropertyNames;var c=Object.prototype.hasOwnProperty;var u=(e,t,i,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of o(t))!c.call(e,r)&&r!==i&&s(e,r,{get:()=>t[r],enumerable:!(a=n(t,r))||a.enumerable});return e};var b=e=>u(s({},"__esModule",{value:!0}),e);var d={};module.exports=b(d);
+'use client';
+"use strict";var i=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var u=Object.prototype.hasOwnProperty;var o=(t,e,n,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of d(e))!u.call(t,r)&&r!==n&&i(t,r,{get:()=>e[r],enumerable:!(a=s(e,r))||a.enumerable});return t};var c=t=>o(i({},"__esModule",{value:!0}),t);var f={};module.exports=c(f);

package/dist/utils/passThrough.d.cts

@@ -1,28 +1,23 @@
 import type * as React from 'react';
-/** @internal Any `data-*` attribute, so a recipe can forward one it cannot name in advance. */
 interface DataAttributes {
     [key: `data-${string}`]: string | number | boolean | undefined;
 }
-/**
- * Standard attributes recipes forward to the *real* control (trigger, input, listbox, panel), not to wrapper elements.
- *
- * Without `id` on the control, external `<label for>` cannot associate, which is a WCAG failure.
- */
+/** Standard attributes recipes forward to the *real* control (trigger, input, listbox, panel), not to wrapper elements; without `id` on the control, external `<label for>` cannot associate. */
 export interface PassThroughProps extends React.AriaAttributes, DataAttributes {
     /**
      * Forwarded to control, so external `<label for>` can name it.
      * @default undefined
      */
-    id?: string;
+    id?: string | undefined;
     /**
      * Forwarded to control alongside part class.
      * @default undefined
      */
-    className?: string;
+    className?: string | undefined;
     /**
      * Inline styles forwarded to the underlying control element.
      * @default undefined
      */
-    style?: React.CSSProperties;
+    style?: React.CSSProperties | undefined;
 }
 export {};

package/dist/utils/passThrough.d.ts

@@ -1,28 +1,23 @@
 import type * as React from 'react';
-/** @internal Any `data-*` attribute, so a recipe can forward one it cannot name in advance. */
 interface DataAttributes {
     [key: `data-${string}`]: string | number | boolean | undefined;
 }
-/**
- * Standard attributes recipes forward to the *real* control (trigger, input, listbox, panel), not to wrapper elements.
- *
- * Without `id` on the control, external `<label for>` cannot associate, which is a WCAG failure.
- */
+/** Standard attributes recipes forward to the *real* control (trigger, input, listbox, panel), not to wrapper elements; without `id` on the control, external `<label for>` cannot associate. */
 export interface PassThroughProps extends React.AriaAttributes, DataAttributes {
     /**
      * Forwarded to control, so external `<label for>` can name it.
      * @default undefined
      */
-    id?: string;
+    id?: string | undefined;
     /**
      * Forwarded to control alongside part class.
      * @default undefined
      */
-    className?: string;
+    className?: string | undefined;
     /**
      * Inline styles forwarded to the underlying control element.
      * @default undefined
      */
-    style?: React.CSSProperties;
+    style?: React.CSSProperties | undefined;
 }
 export {};

package/dist/utils/passThrough.js

@@ -0,0 +1 @@
+'use client';

package/dist/utils/pin-chars.cjs

@@ -0,0 +1,2 @@
+'use client';
+"use strict";var p=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var o=Object.getOwnPropertyNames;var a=Object.prototype.hasOwnProperty;var l=(t,n)=>{for(var e in n)p(t,e,{get:n[e],enumerable:!0})},s=(t,n,e,i)=>{if(n&&typeof n=="object"||typeof n=="function")for(let r of o(n))!a.call(t,r)&&r!==e&&p(t,r,{get:()=>n[r],enumerable:!(i=c(n,r))||i.enumerable});return t};var g=t=>s(p({},"__esModule",{value:!0}),t);var P={};l(P,{pinCharAcceptor:()=>x,pinCharPattern:()=>b,pinInputDigitLabel:()=>h});module.exports=g(P);var u={text:null,numeric:/^[0-9]$/,alphanumeric:/^[a-zA-Z0-9]$/,alphabetic:/^[a-zA-Z]$/};function x(t,n){if(n){let i=new RegExp(n);return r=>i.test(r)}let e=u[t]??null;return e?i=>e.test(i):()=>!0}function b(t,n){return n??u[t]?.source??"."}function h(t,n){return`Digit ${t} of ${n}`}0&&(module.exports={pinCharAcceptor,pinCharPattern,pinInputDigitLabel});

package/dist/utils/pin-chars.d.cts

@@ -0,0 +1,13 @@
+/** The character sets `type` names, in the spelling the contract declares. */
+export type PinInputType = 'text' | 'numeric' | 'alphanumeric' | 'alphabetic';
+/** Builds the per-character predicate used to accept or reject each keystroke. */
+export declare function pinCharAcceptor(type: PinInputType, pattern?: string): (char: string) => boolean;
+/** Returns the pattern source {@link pinCharAcceptor} applies, defaulting to `'.'` for `'text'`. */
+export declare function pinCharPattern(type: PinInputType, pattern?: string): string;
+/**
+ * The default accessible name for a pin box. `index` is 1-based (read aloud).
+ *
+ * @param index the box's position, counting from 1
+ * @param length how many boxes the code has
+ */
+export declare function pinInputDigitLabel(index: number, length: number): string;

package/dist/utils/pin-chars.d.ts

@@ -0,0 +1,13 @@
+/** The character sets `type` names, in the spelling the contract declares. */
+export type PinInputType = 'text' | 'numeric' | 'alphanumeric' | 'alphabetic';
+/** Builds the per-character predicate used to accept or reject each keystroke. */
+export declare function pinCharAcceptor(type: PinInputType, pattern?: string): (char: string) => boolean;
+/** Returns the pattern source {@link pinCharAcceptor} applies, defaulting to `'.'` for `'text'`. */
+export declare function pinCharPattern(type: PinInputType, pattern?: string): string;
+/**
+ * The default accessible name for a pin box. `index` is 1-based (read aloud).
+ *
+ * @param index the box's position, counting from 1
+ * @param length how many boxes the code has
+ */
+export declare function pinInputDigitLabel(index: number, length: number): string;

package/dist/utils/pin-chars.js

@@ -0,0 +1,2 @@
+'use client';
+var i={text:null,numeric:/^[0-9]$/,alphanumeric:/^[a-zA-Z0-9]$/,alphabetic:/^[a-zA-Z]$/};function u(t,n){if(n){let e=new RegExp(n);return p=>e.test(p)}let r=i[t]??null;return r?e=>r.test(e):()=>!0}function c(t,n){return n??i[t]?.source??"."}function o(t,n){return`Digit ${t} of ${n}`}export{u as pinCharAcceptor,c as pinCharPattern,o as pinInputDigitLabel};

package/dist/utils/placement.cjs

@@ -0,0 +1,2 @@
+'use client';
+"use strict";var p=Object.defineProperty;var O=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var $=Object.prototype.hasOwnProperty;var v=(e,i)=>{for(var t in i)p(e,t,{get:i[t],enumerable:!0})},A=(e,i,t,n)=>{if(i&&typeof i=="object"||typeof i=="function")for(let r of w(i))!$.call(e,r)&&r!==t&&p(e,r,{get:()=>i[r],enumerable:!(n=O(i,r))||n.enumerable});return e};var L=e=>A(p({},"__esModule",{value:!0}),e);var I={};v(I,{OPPOSITE_SIDE:()=>f,arrowStyle:()=>u,placementParts:()=>m,positioningMiddleware:()=>j,setMeasurementProperties:()=>c,styleArrow:()=>C,toPlacement:()=>H});module.exports=L(I);function H(e,i){return i==="center"?e:`${e}-${i}`}function m(e){let[i,t="center"]=e.split("-");return[i,t]}var W={start:"0%",center:"50%",end:"100%"};function c(e,i,t){let{availableWidth:n,availableHeight:r,triggerWidth:a,side:o,align:l}=t,d=W[l],g=o==="top"||o==="bottom"?`${d} ${o==="top"?"100%":"0%"}`:`${o==="left"?"100%":"0%"} ${d}`;e.style.setProperty(`--skdx-${i}-available-width`,`${n}px`),e.style.setProperty(`--skdx-${i}-available-height`,`${r}px`),e.style.setProperty(`--skdx-${i}-trigger-width`,`${a}px`),e.style.setProperty(`--skdx-${i}-transform-origin`,g)}var f={top:"bottom",right:"left",bottom:"top",left:"right"};function u(e,i){let t=f[i],n={position:"absolute",left:e?.x!=null?`${e.x}px`:"",top:e?.y!=null?`${e.y}px`:"",right:"",bottom:"",transform:""};return t==="top"&&Object.assign(n,{top:"0px",transform:"translateY(-100%)"}),t==="bottom"&&Object.assign(n,{bottom:"0px",transform:"translateY(100%)"}),t==="left"&&Object.assign(n,{left:"0px",transform:"translateX(-100%)"}),t==="right"&&Object.assign(n,{right:"0px",transform:"translateX(100%)"}),n}function C(e,i,t){Object.assign(e.style,u(i,t))}function j(e,i){let{sideOffset:t=0,alignOffset:n=0,avoidCollisions:r=!0,collisionPadding:a=8,collisionBoundary:o,component:l,arrow:d,arrowPadding:g=0,hideWhenDetached:b=!1}=i,s=o?{boundary:o}:{};return[e.offset({mainAxis:t,alignmentAxis:n}),...r?[e.flip({padding:a,...s}),e.shift({padding:a,limiter:e.limitShift(),...s})]:[],e.size({padding:a,...s,apply({availableWidth:h,availableHeight:y,elements:x,rects:P,placement:E}){if(!l)return;let[S,M]=m(E);c(x.floating,l,{availableWidth:h,availableHeight:y,triggerWidth:P.reference.width,side:S,align:M})}}),...d?[e.arrow({element:d,padding:g})]:[],...b?[e.hide({strategy:"referenceHidden",...s})]:[]]}0&&(module.exports={OPPOSITE_SIDE,arrowStyle,placementParts,positioningMiddleware,setMeasurementProperties,styleArrow,toPlacement});

package/dist/utils/placement.d.cts

@@ -0,0 +1,102 @@
+/** A physical edge of the anchor. */
+export type PhysicalSide = 'top' | 'right' | 'bottom' | 'left';
+/** Side the floating content is placed against; `start`/`end` are logical and resolve under `dir`. */
+export type Side = PhysicalSide | 'start' | 'end';
+/** Alignment of the floating element along the chosen {@link Side}. */
+export type Align = 'start' | 'center' | 'end';
+/** Minimum distance from the collision boundary, for every side or per side. */
+export type CollisionPadding = number | Partial<Record<PhysicalSide, number>>;
+/** The floating-ui placement string for a resolved side and alignment. */
+export declare function toPlacement(side: PhysicalSide, align: Align): string;
+/** The side and alignment a floating-ui placement string resolved to. */
+export declare function placementParts(placement: string): [PhysicalSide, Align];
+/**
+ * Writes the four `--skdx-<component>-*` measurement properties onto the floating element after a reposition, with the transform origin derived from the resolved side/alignment so a flipped panel grows from the edge it actually sits on.
+ */
+export declare function setMeasurementProperties(floating: HTMLElement, component: string, measurements: {
+    availableWidth: number;
+    availableHeight: number;
+    triggerWidth: number;
+    side: PhysicalSide;
+    align: Align;
+}): void;
+/** The edge an arrow sits on: opposite the side the panel was placed against. */
+export declare const OPPOSITE_SIDE: Record<PhysicalSide, PhysicalSide>;
+/** Inline style for an arrow element given floating-ui's arrow offsets and the resolved side. */
+export declare function arrowStyle(offsets: {
+    x?: number | undefined;
+    y?: number | undefined;
+} | undefined, side: PhysicalSide): {
+    position: 'absolute';
+    left: string;
+    top: string;
+    right: string;
+    bottom: string;
+    transform: string;
+};
+/** Applies {@link arrowStyle} to an arrow element in place. */
+export declare function styleArrow(el: HTMLElement, offsets: {
+    x?: number | undefined;
+    y?: number | undefined;
+} | undefined, side: PhysicalSide): void;
+/** What the `size` middleware reports after flip/shift settled. */
+export interface SizeState {
+    availableWidth: number;
+    availableHeight: number;
+    elements: {
+        floating: HTMLElement;
+    };
+    rects: {
+        reference: {
+            width: number;
+        };
+    };
+    placement: string;
+}
+/** The floating-ui middleware factories an adapter injects — `M` is its `Middleware`, `L` its shift limiter, `E` what its `arrow` accepts as the element. */
+export interface FloatingMiddleware<M, L, E> {
+    offset(options: {
+        mainAxis: number;
+        alignmentAxis: number;
+    }): M;
+    flip(options: {
+        padding: CollisionPadding;
+        boundary?: Element | Element[];
+    }): M;
+    shift(options: {
+        padding: CollisionPadding;
+        limiter: L;
+        boundary?: Element | Element[];
+    }): M;
+    limitShift(): L;
+    size(options: {
+        padding: CollisionPadding;
+        boundary?: Element | Element[];
+        apply(state: SizeState): void;
+    }): M;
+    arrow(options: {
+        element: E;
+        padding: number;
+    }): M;
+    hide(options: {
+        strategy: 'referenceHidden';
+        boundary?: Element | Element[];
+    }): M;
+}
+/** The options {@link positioningMiddleware} turns into a middleware list. */
+export interface PositioningOptions<E> {
+    sideOffset?: number | undefined;
+    alignOffset?: number | undefined;
+    avoidCollisions?: boolean | undefined;
+    collisionPadding?: CollisionPadding | undefined;
+    collisionBoundary?: Element | Element[] | null | undefined;
+    /** Kebab-case component name the measurement properties are written under; omitted, none are written. */
+    component?: string | undefined;
+    arrow?: E | null | undefined;
+    arrowPadding?: number | undefined;
+    hideWhenDetached?: boolean | undefined;
+}
+/**
+ * The one middleware order every panel uses: offset, then flip/shift when collisions are avoided, then `size` (so it measures the placement the content landed on), the arrow, and `hide` last so visibility is judged against the settled placement.
+ */
+export declare function positioningMiddleware<M, L, E>(fu: FloatingMiddleware<M, L, E>, options: PositioningOptions<E>): M[];

package/dist/utils/placement.d.ts

@@ -0,0 +1,102 @@
+/** A physical edge of the anchor. */
+export type PhysicalSide = 'top' | 'right' | 'bottom' | 'left';
+/** Side the floating content is placed against; `start`/`end` are logical and resolve under `dir`. */
+export type Side = PhysicalSide | 'start' | 'end';
+/** Alignment of the floating element along the chosen {@link Side}. */
+export type Align = 'start' | 'center' | 'end';
+/** Minimum distance from the collision boundary, for every side or per side. */
+export type CollisionPadding = number | Partial<Record<PhysicalSide, number>>;
+/** The floating-ui placement string for a resolved side and alignment. */
+export declare function toPlacement(side: PhysicalSide, align: Align): string;
+/** The side and alignment a floating-ui placement string resolved to. */
+export declare function placementParts(placement: string): [PhysicalSide, Align];
+/**
+ * Writes the four `--skdx-<component>-*` measurement properties onto the floating element after a reposition, with the transform origin derived from the resolved side/alignment so a flipped panel grows from the edge it actually sits on.
+ */
+export declare function setMeasurementProperties(floating: HTMLElement, component: string, measurements: {
+    availableWidth: number;
+    availableHeight: number;
+    triggerWidth: number;
+    side: PhysicalSide;
+    align: Align;
+}): void;
+/** The edge an arrow sits on: opposite the side the panel was placed against. */
+export declare const OPPOSITE_SIDE: Record<PhysicalSide, PhysicalSide>;
+/** Inline style for an arrow element given floating-ui's arrow offsets and the resolved side. */
+export declare function arrowStyle(offsets: {
+    x?: number | undefined;
+    y?: number | undefined;
+} | undefined, side: PhysicalSide): {
+    position: 'absolute';
+    left: string;
+    top: string;
+    right: string;
+    bottom: string;
+    transform: string;
+};
+/** Applies {@link arrowStyle} to an arrow element in place. */
+export declare function styleArrow(el: HTMLElement, offsets: {
+    x?: number | undefined;
+    y?: number | undefined;
+} | undefined, side: PhysicalSide): void;
+/** What the `size` middleware reports after flip/shift settled. */
+export interface SizeState {
+    availableWidth: number;
+    availableHeight: number;
+    elements: {
+        floating: HTMLElement;
+    };
+    rects: {
+        reference: {
+            width: number;
+        };
+    };
+    placement: string;
+}
+/** The floating-ui middleware factories an adapter injects — `M` is its `Middleware`, `L` its shift limiter, `E` what its `arrow` accepts as the element. */
+export interface FloatingMiddleware<M, L, E> {
+    offset(options: {
+        mainAxis: number;
+        alignmentAxis: number;
+    }): M;
+    flip(options: {
+        padding: CollisionPadding;
+        boundary?: Element | Element[];
+    }): M;
+    shift(options: {
+        padding: CollisionPadding;
+        limiter: L;
+        boundary?: Element | Element[];
+    }): M;
+    limitShift(): L;
+    size(options: {
+        padding: CollisionPadding;
+        boundary?: Element | Element[];
+        apply(state: SizeState): void;
+    }): M;
+    arrow(options: {
+        element: E;
+        padding: number;
+    }): M;
+    hide(options: {
+        strategy: 'referenceHidden';
+        boundary?: Element | Element[];
+    }): M;
+}
+/** The options {@link positioningMiddleware} turns into a middleware list. */
+export interface PositioningOptions<E> {
+    sideOffset?: number | undefined;
+    alignOffset?: number | undefined;
+    avoidCollisions?: boolean | undefined;
+    collisionPadding?: CollisionPadding | undefined;
+    collisionBoundary?: Element | Element[] | null | undefined;
+    /** Kebab-case component name the measurement properties are written under; omitted, none are written. */
+    component?: string | undefined;
+    arrow?: E | null | undefined;
+    arrowPadding?: number | undefined;
+    hideWhenDetached?: boolean | undefined;
+}
+/**
+ * The one middleware order every panel uses: offset, then flip/shift when collisions are avoided, then `size` (so it measures the placement the content landed on), the arrow, and `hide` last so visibility is judged against the settled placement.
+ */
+export declare function positioningMiddleware<M, L, E>(fu: FloatingMiddleware<M, L, E>, options: PositioningOptions<E>): M[];

package/dist/utils/placement.js

@@ -0,0 +1,2 @@
+'use client';
+function O(e,i){return i==="center"?e:`${e}-${i}`}function x(e){let[i,t="center"]=e.split("-");return[i,t]}var P={start:"0%",center:"50%",end:"100%"};function E(e,i,t){let{availableWidth:n,availableHeight:s,triggerWidth:o,side:r,align:d}=t,a=P[d],g=r==="top"||r==="bottom"?`${a} ${r==="top"?"100%":"0%"}`:`${r==="left"?"100%":"0%"} ${a}`;e.style.setProperty(`--skdx-${i}-available-width`,`${n}px`),e.style.setProperty(`--skdx-${i}-available-height`,`${s}px`),e.style.setProperty(`--skdx-${i}-trigger-width`,`${o}px`),e.style.setProperty(`--skdx-${i}-transform-origin`,g)}var S={top:"bottom",right:"left",bottom:"top",left:"right"};function M(e,i){let t=S[i],n={position:"absolute",left:e?.x!=null?`${e.x}px`:"",top:e?.y!=null?`${e.y}px`:"",right:"",bottom:"",transform:""};return t==="top"&&Object.assign(n,{top:"0px",transform:"translateY(-100%)"}),t==="bottom"&&Object.assign(n,{bottom:"0px",transform:"translateY(100%)"}),t==="left"&&Object.assign(n,{left:"0px",transform:"translateX(-100%)"}),t==="right"&&Object.assign(n,{right:"0px",transform:"translateX(100%)"}),n}function w(e,i,t){Object.assign(e.style,M(i,t))}function $(e,i){let{sideOffset:t=0,alignOffset:n=0,avoidCollisions:s=!0,collisionPadding:o=8,collisionBoundary:r,component:d,arrow:a,arrowPadding:g=0,hideWhenDetached:p=!1}=i,l=r?{boundary:r}:{};return[e.offset({mainAxis:t,alignmentAxis:n}),...s?[e.flip({padding:o,...l}),e.shift({padding:o,limiter:e.limitShift(),...l})]:[],e.size({padding:o,...l,apply({availableWidth:m,availableHeight:c,elements:f,rects:u,placement:b}){if(!d)return;let[h,y]=x(b);E(f.floating,d,{availableWidth:m,availableHeight:c,triggerWidth:u.reference.width,side:h,align:y})}}),...a?[e.arrow({element:a,padding:g})]:[],...p?[e.hide({strategy:"referenceHidden",...l})]:[]]}export{S as OPPOSITE_SIDE,M as arrowStyle,x as placementParts,$ as positioningMiddleware,E as setMeasurementProperties,w as styleArrow,O as toPlacement};

package/dist/utils/popper.cjs

@@ -1 +1,2 @@
-"use strict";var K=Object.create;var P=Object.defineProperty;var Q=Object.getOwnPropertyDescriptor;var Z=Object.getOwnPropertyNames;var ee=Object.getPrototypeOf,te=Object.prototype.hasOwnProperty;var re=(e,t)=>{for(var r in t)P(e,r,{get:t[r],enumerable:!0})},A=(e,t,r,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of Z(t))!te.call(e,o)&&o!==r&&P(e,o,{get:()=>t[o],enumerable:!(a=Q(t,o))||a.enumerable});return e};var ne=(e,t,r)=>(r=e!=null?K(ee(e)):{},A(t||!e||!e.__esModule?P(r,"default",{value:e,enumerable:!0}):r,e)),oe=e=>A(P({},"__esModule",{value:!0}),e);var ce={};re(ce,{PopperAnchor:()=>C,PopperArrow:()=>M,PopperContent:()=>O,PopperRoot:()=>ae,setMeasurementProperties:()=>H,usePopperContext:()=>x});module.exports=oe(ce);var n=require("@floating-ui/react-dom"),i=ne(require("react"),1),h=require("./composeRefs.cjs"),E=require("./createContext.cjs"),f=require("./direction.cjs"),g=require("./primitive.cjs"),p=require("react/jsx-runtime"),[ie,x]=(0,E.createSafeContext)("Popper");function ae({children:e,updateRef:t}){let[r,a]=i.useState(null),o=i.useRef(null);return(0,p.jsx)(ie,{anchor:r,setAnchor:a,updateRef:t??o,children:e})}var C=i.forwardRef((e,t)=>{let r=x("PopperAnchor"),a=(0,h.useComposedRefs)(t,o=>r.setAnchor(o));return(0,p.jsx)(g.Primitive.div,{...e,ref:a})});C.displayName="PopperAnchor";function se(e,t){return t==="center"?e:`${e}-${t}`}var le={start:"0%",center:"50%",end:"100%"};function H(e,t,r){let{availableWidth:a,availableHeight:o,triggerWidth:c,side:l,align:d}=r,s=le[d],m=l==="top"||l==="bottom"?`${s} ${l==="top"?"100%":"0%"}`:`${l==="left"?"100%":"0%"} ${s}`;e.style.setProperty(`--skdx-${t}-available-width`,`${a}px`),e.style.setProperty(`--skdx-${t}-available-height`,`${o}px`),e.style.setProperty(`--skdx-${t}-trigger-width`,`${c}px`),e.style.setProperty(`--skdx-${t}-transform-origin`,m)}var $=i.createContext(null),O=i.forwardRef((e,t)=>{let{side:r="bottom",align:a="center",sideOffset:o=0,alignOffset:c=0,avoidCollisions:l=!0,collisionPadding:d=8,collisionBoundary:s,component:m,arrowPadding:L=0,hideWhenDetached:T=!1,style:W,...D}=e,R=x("PopperContent"),w=i.useRef(null),N=(0,f.useDirection)(),k=(0,f.resolveDirection)(R.anchor,N),u=s?{boundary:s}:{},{refs:I,floatingStyles:X,placement:Y,middlewareData:y,update:b}=(0,n.useFloating)({placement:se((0,f.resolvePhysicalSide)(r,k),a),whileElementsMounted:n.autoUpdate,elements:{reference:R.anchor},middleware:[(0,n.offset)({mainAxis:o,alignmentAxis:c}),...l?[(0,n.flip)({padding:d,...u}),(0,n.shift)({padding:d,limiter:(0,n.limitShift)(),...u})]:[],(0,n.size)({padding:d,...u,apply({availableWidth:G,availableHeight:U,elements:V,rects:_,placement:z}){if(!m)return;let[q,J="center"]=z.split("-");H(V.floating,m,{availableWidth:G,availableHeight:U,triggerWidth:_.reference.width,side:q,align:J})}}),(0,n.arrow)({element:w,padding:L}),...T?[(0,n.hide)({strategy:"referenceHidden",...u})]:[]]}),j=(0,h.useComposedRefs)(t,I.setFloating),[S,B="center"]=Y.split("-"),F=y.hide?.referenceHidden===!0,{updateRef:v}=R;return i.useEffect(()=>(v.current=b,()=>{v.current=null}),[v,b]),(0,p.jsx)($.Provider,{value:{arrowRef:w,arrowX:y.arrow?.x,arrowY:y.arrow?.y,side:S},children:(0,p.jsx)(g.Primitive.div,{"data-side":S,"data-align":B,...D,ref:j,style:{...X,...W,...F&&{visibility:"hidden",pointerEvents:"none"}}})})});O.displayName="PopperContent";var de={top:"bottom",right:"left",bottom:"top",left:"right"},M=i.forwardRef((e,t)=>{let r=i.useContext($);if(!r)throw new Error("[skandadx] PopperArrow must be used within PopperContent.");let{arrowRef:a,arrowX:o,arrowY:c,side:l}=r,d=(0,h.useComposedRefs)(t,a),s=de[l];return(0,p.jsx)(g.Primitive.span,{...e,ref:d,style:{position:"absolute",left:o!=null?`${o}px`:void 0,top:c!=null?`${c}px`:void 0,[s]:void 0,...s==="top"&&{top:0,transform:"translateY(-100%)"},...s==="bottom"&&{bottom:0,transform:"translateY(100%)"},...s==="left"&&{left:0,transform:"translateX(-100%)"},...s==="right"&&{right:0,transform:"translateX(100%)"},...e.style}})});M.displayName="PopperArrow";0&&(module.exports={PopperAnchor,PopperArrow,PopperContent,PopperRoot,setMeasurementProperties,usePopperContext});
+'use client';
+"use strict";var G=Object.create;var P=Object.defineProperty;var J=Object.getOwnPropertyDescriptor;var _=Object.getOwnPropertyNames;var q=Object.getPrototypeOf,K=Object.prototype.hasOwnProperty;var Q=(e,t)=>{for(var o in t)P(e,o,{get:t[o],enumerable:!0})},E=(e,t,o,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of _(t))!K.call(e,i)&&i!==o&&P(e,i,{get:()=>t[i],enumerable:!(a=J(t,i))||a.enumerable});return e};var Z=(e,t,o)=>(o=e!=null?G(q(e)):{},E(t||!e||!e.__esModule?P(o,"default",{value:e,enumerable:!0}):o,e)),ee=e=>E(P({},"__esModule",{value:!0}),e);var re={};Q(re,{PopperAnchor:()=>T,PopperArrow:()=>L,PopperContent:()=>H,PopperRoot:()=>oe,setMeasurementProperties:()=>V.setMeasurementProperties,usePopperContext:()=>g});module.exports=ee(re);var n=require("@floating-ui/react-dom"),r=Z(require("react"),1),h=require("./composeRefs.cjs"),M=require("./createContext.cjs"),p=require("./direction.cjs"),c=require("./placement.cjs"),R=require("./primitive.cjs"),V=require("./placement.cjs"),d=require("react/jsx-runtime"),te={offset:n.offset,flip:n.flip,shift:n.shift,limitShift:n.limitShift,size:n.size,arrow:n.arrow,hide:n.hide},[ne,g]=(0,M.createSafeContext)("Popper");function oe({children:e,updateRef:t}){let[o,a]=r.useState(null),[i,s]=r.useState(null),f=r.useCallback((l,w=!1)=>{w?s(l):a(l)},[]),u=r.useRef(null);return(0,d.jsx)(ne,{anchor:i??o,setAnchor:f,updateRef:t??u,children:e})}var T=({ref:e,explicit:t,...o})=>{let a=g("PopperAnchor"),i=(0,h.useComposedRefs)(e,s=>a.setAnchor(s,t));return(0,d.jsx)(R.Primitive.div,{...o,ref:i})};T.displayName="PopperAnchor";var O=r.createContext(null),H=({ref:e,...t})=>{let{side:o="bottom",align:a="center",sideOffset:i=0,alignOffset:s=0,avoidCollisions:f=!0,collisionPadding:u=8,collisionBoundary:l,component:w,arrowPadding:N=0,hideWhenDetached:D=!1,style:W,...X}=t,m=g("PopperContent"),x=r.useRef(null),Y=(0,p.useDirection)(),F=(0,p.resolveDirection)(m.anchor&&"nodeType"in m.anchor?m.anchor:null,Y),{refs:I,floatingStyles:j,placement:k,middlewareData:y,update:b}=(0,n.useFloating)({placement:(0,c.toPlacement)((0,p.resolvePhysicalSide)(o,F),a),whileElementsMounted:n.autoUpdate,elements:{reference:m.anchor},middleware:(0,c.positioningMiddleware)(te,{sideOffset:i,alignOffset:s,avoidCollisions:f,collisionPadding:u,collisionBoundary:l,component:w,arrow:x,arrowPadding:N,hideWhenDetached:D})}),B=(0,h.useComposedRefs)(e,I.setFloating),[A,U]=(0,c.placementParts)(k),$=y.hide?.referenceHidden===!0,S=y.arrow?.x,C=y.arrow?.y,z=r.useMemo(()=>({arrowRef:x,arrowX:S,arrowY:C,side:A}),[x,S,C,A]),{updateRef:v}=m;return r.useEffect(()=>(v.current=b,()=>{v.current=null}),[v,b]),(0,d.jsx)(O.Provider,{value:z,children:(0,d.jsx)(R.Primitive.div,{"data-side":A,"data-align":U,...X,ref:B,style:{...j,...W,...$&&{visibility:"hidden",pointerEvents:"none"}}})})};H.displayName="PopperContent";var L=({ref:e,...t})=>{let o=r.useContext(O);if(!o)throw new Error("[skandadx] PopperArrow must be used within PopperContent.");let{arrowRef:a,arrowX:i,arrowY:s,side:f}=o,u=(0,h.useComposedRefs)(e,a),l=c.OPPOSITE_SIDE[f];return(0,d.jsx)(R.Primitive.span,{...t,ref:u,style:{position:"absolute",left:i!=null?`${i}px`:void 0,top:s!=null?`${s}px`:void 0,[l]:void 0,...l==="top"&&{top:0,transform:"translateY(-100%)"},...l==="bottom"&&{bottom:0,transform:"translateY(100%)"},...l==="left"&&{left:0,transform:"translateX(-100%)"},...l==="right"&&{right:0,transform:"translateX(100%)"},...t.style}})};L.displayName="PopperArrow";0&&(module.exports={PopperAnchor,PopperArrow,PopperContent,PopperRoot,setMeasurementProperties,usePopperContext});

package/dist/utils/popper.d.cts

@@ -1,161 +1,86 @@
 import * as React from 'react';
+import type { VirtualAnchor } from './mentions.cjs';
+import { type Align, type PhysicalSide, type Side } from './placement.cjs';
 import { type PrimitivePropsWithRef } from './primitive.cjs';
-/**
- * Internal positioning layer shared by Popover, Tooltip, DropdownMenu and
- * Select. Wraps floating-ui with a Radix-like side/align API and exposes
- * `data-side` / `data-align` for animation styling.
- */
-/** @internal A physical edge. `data-side` always carries one of these — it reports where the content actually landed. */
-export type PhysicalSide = 'top' | 'right' | 'bottom' | 'left';
-/**
- * @internal Edge of the anchor the floating content is placed against.
- * `start`/`end` are *logical*: they resolve to `left`/`right` under `dir="ltr"`
- * and swap under `dir="rtl"`, so an overlay authored as `side="end"` mirrors
- * itself. `left`/`right` are physical and never mirror.
- */
-export type Side = PhysicalSide | 'start' | 'end';
-/** @internal Alignment of the floating content along the chosen {@link Side}. */
-export type Align = 'start' | 'center' | 'end';
+export { setMeasurementProperties, type Align, type PhysicalSide, type Side } from './placement.cjs';
 interface PopperContextValue {
-    anchor: HTMLElement | null;
-    setAnchor: (node: HTMLElement | null) => void;
-    /**
-     * Filled by {@link PopperContent} with floating-ui's manual reposition
-     * trigger while it is mounted, and emptied again on unmount.
-     *
-     * `autoUpdate` already re-runs on scroll, resize and an observed size change
-     * of either element. What it cannot see is the anchor *moving* for a reason
-     * the DOM does not report — a CSS transform finishing, a virtual list
-     * re-flowing its rows, a parent that repositioned without changing size — so
-     * a family that exposes a public `reposition()` needs a handle on the same
-     * update the observers call. A ref rather than state: it is written from an
-     * effect and read from an event handler, never rendered.
-     */
+    /** A real element, or the rectangle-only reference Mentions positions against the caret. */
+    anchor: HTMLElement | VirtualAnchor | null;
+    /** `explicit` marks an `Anchor` part, which outranks the trigger's own registration however the two happen to mount. */
+    setAnchor: (node: HTMLElement | VirtualAnchor | null, explicit?: boolean) => void;
     updateRef: React.RefObject<(() => void) | null>;
 }
 declare const usePopperContext: (consumerName: string) => PopperContextValue;
 /**
- * @internal Provides the anchor element to descendant `Popper*` parts; wrap the
- * anchor and content in one.
- *
- * @param updateRef Optional ref the mounted {@link PopperContent}'s reposition
- * trigger is published into, so a family root rendered *outside* this provider
- * (every overlay root wraps its children in one) can still expose a public
- * `reposition()`. Omit it and the root keeps a private one.
+ * @internal Provides the anchor element to descendant `Popper*` parts; wrap the anchor and content in one.
+ * @param updateRef Optional ref the mounted {@link PopperContent}'s reposition trigger publishes into, for a family root rendered outside this provider to expose its own `reposition()`.
  */
 export declare function PopperRoot({ children, updateRef, }: {
     children: React.ReactNode;
-    updateRef?: React.RefObject<(() => void) | null>;
+    updateRef?: React.RefObject<(() => void) | null> | undefined;
 }): React.JSX.Element;
 /** @internal Marks its rendered element as the anchor that {@link PopperContent} positions against. */
-export declare const PopperAnchor: React.ForwardRefExoticComponent<Omit<PrimitivePropsWithRef<"div">, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const PopperAnchor: {
+    ({ ref: forwardedRef, explicit, ...props }: PrimitivePropsWithRef<"div"> & {
+        explicit?: boolean | undefined;
+    }): React.ReactNode;
+    displayName: string;
+};
 /** @internal Positioning props for {@link PopperContent}. */
 export interface PopperContentProps extends PrimitivePropsWithRef<'div'> {
     /**
-     * Preferred side of the anchor to render on. `start`/`end` are logical and
-     * follow the writing direction; `left`/`right` are physical and do not. A
-     * consuming component (e.g. `ComboboxContent`) may override this default.
+     * Preferred side of the anchor to render on; `start`/`end` are logical and follow the writing direction, `left`/`right` are physical and don't.
      * @default 'bottom'
      */
-    side?: Side;
+    side?: Side | undefined;
     /**
-     * Alignment along the chosen side. A consuming component may override this default.
+     * Alignment of the content along the chosen side.
      * @default 'center'
      */
-    align?: Align;
+    align?: Align | undefined;
     /**
-     * Distance in pixels between the content and the anchor along `side`. A consuming component may override this default.
+     * Distance in pixels between the content and the anchor along `side`.
      * @default 0
      */
-    sideOffset?: number;
+    sideOffset?: number | undefined;
     /**
      * Offset in pixels along `align`, shifting the content perpendicular to `side`.
      * @default 0
      */
-    alignOffset?: number;
+    alignOffset?: number | undefined;
     /**
      * Flips to the opposite side when there isn't room to render on the preferred side.
      * @default true
      */
-    avoidCollisions?: boolean;
+    avoidCollisions?: boolean | undefined;
     /**
      * Minimum distance in pixels kept from the collision boundary when avoiding
      * collisions. A number applies to every side; an object sets only the sides
      * it names, the rest falling back to `0`.
      * @default 8
      */
-    collisionPadding?: number | Partial<Record<PhysicalSide, number>>;
+    collisionPadding?: number | Partial<Record<PhysicalSide, number>> | undefined;
     /**
      * Element (or elements) collisions are measured against, instead of the
      * content's clipping ancestors. Use it to keep an overlay inside a scroll
      * container or one pane of a split layout rather than the whole viewport.
      * @default undefined — the content's clipping ancestors.
      */
-    collisionBoundary?: Element | Element[] | null;
+    collisionBoundary?: Element | Element[] | null | undefined;
 }
-/**
- * @internal {@link PopperContent}'s own props: the public positioning API,
- * plus the custom-property namespace its consuming component supplies.
- */
 interface PopperOwnProps extends PopperContentProps {
-    /**
-     * Kebab-case component name the measurement custom properties are namespaced
-     * under — `"popover"` yields `--skdx-popover-available-width` and friends.
-     * Deliberately absent from {@link PopperContentProps}, which every overlay's
-     * public `*ContentProps` extends: the namespace belongs to the component,
-     * not to its consumer.
-     * @default undefined — an internal popper with no documented namespace writes no measurement properties at all.
-     */
-    component?: string;
-    /**
-     * Clearance in pixels kept between the arrow and each end of the panel's
-     * edge, so the arrow never overlaps a rounded corner. Fed straight to
-     * floating-ui's `arrow` middleware as its `padding`.
-     *
-     * Defaults to `0` — today's behaviour — rather than to the `8` Popover's
-     * public prop defaults to: every popper family shares this layer, and
-     * silently moving Tooltip's, HoverCard's and the menu families' arrows is not
-     * warranted. A family that wants clearance passes its own.
-     * @default 0
-     */
-    arrowPadding?: number;
-    /**
-     * Hide the panel while the anchor is fully clipped out of view by a scroll
-     * container, instead of leaving it floating over unrelated content.
-     *
-     * Off by default because the middleware costs an extra overflow measurement
-     * on every reposition and the failure it prevents only exists for an anchor
-     * inside a scrollable ancestor. Passed through from a family's public
-     * `hideWhenDetached`.
-     * @default false
-     */
-    hideWhenDetached?: boolean;
+    component?: string | undefined;
+    arrowPadding?: number | undefined;
+    hideWhenDetached?: boolean | undefined;
 }
-/**
- * Writes the four measurement custom properties onto the floating element
- * after each reposition, so a consumer can size the panel from CSS alone
- * (`max-height: var(--skdx-select-available-height)`) instead of measuring in
- * JavaScript. Mirrored by `positionFloating`/`usePopperPosition` in the other
- * four packages and asserted by `assertPopperMeasurementProperties`.
- *
- * The transform origin is derived from the *resolved* side and alignment, so
- * a panel that flipped grows from the edge it actually landed on.
- *
- * ponytail: origin is edge-and-alignment accurate but not arrow-accurate —
- * a panel with a shifted arrow scales from the aligned edge rather than from
- * the arrow's tip. Feed the arrow middleware's offset in here if that ever
- * shows.
- * @internal
- */
-export declare function setMeasurementProperties(floating: HTMLElement, component: string, measurements: {
-    availableWidth: number;
-    availableHeight: number;
-    triggerWidth: number;
-    side: PhysicalSide;
-    align: Align;
-}): void;
 /** @internal Floating element positioned against the anchor via floating-ui; exposes `data-side`/`data-align` and provides arrow context. */
-export declare const PopperContent: React.ForwardRefExoticComponent<Omit<PopperOwnProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const PopperContent: {
+    ({ ref: forwardedRef, ...props }: PopperOwnProps): React.ReactNode;
+    displayName: string;
+};
 /** @internal Arrow pointing at the anchor; must render inside {@link PopperContent}, which positions it via context. */
-export declare const PopperArrow: React.ForwardRefExoticComponent<Omit<PrimitivePropsWithRef<"span">, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export declare const PopperArrow: {
+    ({ ref: forwardedRef, ...props }: PrimitivePropsWithRef<"span">): React.ReactNode;
+    displayName: string;
+};
 export { usePopperContext };