@skdx/react 0.26.0

package/dist/utils/menuSub.d.ts

@@ -0,0 +1,120 @@
+import * as React from 'react';
+import { type PopperContentProps } from './popper.js';
+import { type PrimitivePropsWithRef } from './primitive.js';
+/**
+ * Marks a portalled submenu panel as belonging to the menu that opened it.
+ *
+ * A menu passes `[${MENU_BRANCH_ATTRIBUTE}]` to `useDismiss` as its
+ * `insideSelector`, so the panel counts as inside despite no longer being
+ * `contains()`-reachable from the menu's content ref.
+ *
+ * Deliberately valueless rather than keyed to the owning menu's id, which would
+ * mean threading that id through three families for a distinction nothing can
+ * observe: opening a second menu dismisses the first through *its* trigger's
+ * pointer-down, which is outside either way, so two menus are never open with
+ * a submenu between them.
+ */
+export declare const MENU_BRANCH_ATTRIBUTE = "data-skdx-menu-branch";
+/** Props for a menu submenu root ({@link MenuSub}). */
+export interface MenuSubProps {
+    /**
+     * The re-exporting family, e.g. `'context-menu'`, which is what lets the
+     * shared parts name their own classes. Supplied by the family wrapper
+     * (`DropdownMenuSub`, `ContextMenuSub`, `MenubarSub`), never by an
+     * application — each wrapper `Omit`s it from its own props for that reason.
+     *
+     * Written as a description followed by the tag, not as tag text: the docs
+     * manifest takes a member's summary from the text *before* the first block
+     * tag, so `@internal The re-exporting family…` left all three wrappers
+     * reported as having an undescribed prop.
+     *
+     * @internal
+     */
+    family: string;
+    /**
+     * The `SubTrigger` and `SubContent` parts of this submenu.
+     * @default undefined — renders nothing if omitted.
+     */
+    children?: React.ReactNode;
+    /**
+     * Whether the submenu is open, for controlled usage. Pair with `onOpenChange`.
+     * @default undefined — uncontrolled, tracks its own open state internally.
+     */
+    open?: boolean;
+    /**
+     * Whether the submenu is initially open, for uncontrolled usage.
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * Fires with the new open state whenever the submenu opens or closes, controlled or not.
+     * @default undefined — no-op if omitted.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Fires with the new open state once the change has finished on screen —
+     * after `SubContent`'s enter or exit animation ends, or as soon as it has
+     * settled when the panel declares no animation. Use it for work that must not race
+     * the transition; use `onOpenChange` for work that must not wait for it.
+     * @default undefined — no-op if omitted.
+     */
+    onOpenChangeComplete?: (open: boolean) => void;
+}
+/** Props for a menu submenu trigger ({@link MenuSubTrigger}). */
+export interface MenuSubTriggerProps extends PrimitivePropsWithRef<'div'> {
+    /**
+     * Excludes the trigger from roving-focus navigation and blocks it from opening the submenu.
+     * @default false
+     */
+    disabled?: boolean;
+}
+/**
+ * Props for a menu submenu panel ({@link MenuSubContent}). Extends the shared
+ * popper positioning props (`side`, `align`, `sideOffset`, `alignOffset`,
+ * `avoidCollisions`, `collisionPadding`).
+ */
+export interface MenuSubContentProps extends PopperContentProps {
+    /**
+     * Keep this panel mounted even while the submenu is closed. Useful for
+     * animation libraries that need the outgoing panel present in the DOM
+     * during an exit transition.
+     * @default false
+     */
+    forceMount?: boolean;
+    /**
+     * Whether Up/Down arrow-key navigation wraps from the last item back to
+     * the first (and vice versa).
+     * @default true
+     */
+    loop?: boolean;
+}
+/**
+ * @internal Root of a nested submenu: owns the submenu's open state and the
+ * hover grace timer, and provides a nested popper anchor context so
+ * `MenuSubContent` positions against `MenuSubTrigger`. Renders no DOM element
+ * itself.
+ */
+export declare function MenuSub({ family, children, open: openProp, defaultOpen, onOpenChange, onOpenChangeComplete, }: MenuSubProps): React.JSX.Element;
+export declare namespace MenuSub {
+    var displayName: string;
+}
+/**
+ * @internal The parent-menu item that opens a submenu: `role="menuitem"` with
+ * `aria-haspopup="menu"`, `aria-expanded`, `aria-controls` and `data-state`.
+ * Doubles as the popper anchor for `MenuSubContent`. Opens on click, Enter,
+ * Space and ArrowRight (moving focus to the submenu's first item), and on
+ * hover (leaving focus where it is). Under `dir="rtl"` the opening key is
+ * ArrowLeft instead.
+ */
+export declare const MenuSubTrigger: React.ForwardRefExoticComponent<Omit<MenuSubTriggerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * @internal The submenu's floating panel: `role="menu"` with
+ * `aria-orientation="vertical"` and `data-state`, positioned by the shared
+ * popper layer against its `MenuSubTrigger` (`side="end"`, `align="start"` by
+ * default — logical, so it opens to the right under LTR and to the left under
+ * RTL) and exposing the resolved `data-side`/`data-align`. Owns vertical
+ * roving focus and typeahead over its own items; ArrowLeft and Escape close
+ * it and return focus to the trigger, leaving the parent menu open — under
+ * `dir="rtl"` the closing arrow is ArrowRight.
+ */
+export declare const MenuSubContent: React.ForwardRefExoticComponent<Omit<MenuSubContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/utils/menuSub.js

@@ -0,0 +1 @@
+import*as o from"react";import{useComposedRefs as b}from"./composeRefs.js";import{createSafeContext as y}from"./createContext.js";import{directionalKey as g,useDirection as P}from"./direction.js";import{skdxPart as C}from"./part.js";import{PopperAnchor as E,PopperContent as v,PopperRoot as h}from"./popper.js";import{Portal as w}from"./portal.js";import{composeEventHandlers as s,Primitive as x}from"./primitive.js";import{useControllableState as N}from"./useControllableState.js";import{useOpenChangeComplete as L}from"./useOpenChangeComplete.js";import{useRovingFocus as D}from"./useRovingFocus.js";import{jsx as f}from"react/jsx-runtime";var M='[role^="menuitem"]:not([data-disabled])',k="data-skdx-menu-branch",H=150,[I,T]=y("MenuSub");function O({family:t,children:r,open:p,defaultOpen:n=!1,onOpenChange:m,onOpenChangeComplete:i}){let l=o.useRef(null),e=o.useRef(null),a=o.useRef(void 0),[d=!1,u]=N({prop:p,defaultProp:n,onChange:m});L(d,e,i),o.useEffect(()=>()=>clearTimeout(a.current),[]);let c=o.useCallback(()=>{clearTimeout(a.current),u(!0)},[u]),R=o.useCallback(()=>{clearTimeout(a.current),u(!1)},[u]),S=o.useCallback(()=>{clearTimeout(a.current),a.current=setTimeout(()=>u(!1),H)},[u]);return f(h,{children:f(I,{family:t,open:d,openNow:c,closeNow:R,scheduleClose:S,triggerRef:l,contentRef:e,contentId:o.useId(),children:r})})}O.displayName="MenuSub";var A=o.forwardRef(({disabled:t,...r},p)=>{let n=T("MenuSubTrigger"),m=b(p,n.triggerRef),i=P(),l=()=>{n.openNow(),requestAnimationFrame(()=>{let e=n.contentRef.current;(e?.querySelector(M)??e)?.focus()})};return f(E,{asChild:!0,children:f(x.div,{role:"menuitem","aria-haspopup":"menu","aria-expanded":n.open,"aria-controls":n.contentId,"data-state":n.open?"open":"closed","data-disabled":t?"":void 0,"aria-disabled":t||void 0,tabIndex:t?void 0:-1,...r,...C(n.family,"sub-trigger",r.className),ref:m,onClick:s(r.onClick,()=>{t||l()}),onKeyDown:s(r.onKeyDown,e=>{if(t)return;let a=g(e.key,e.currentTarget,i);["ArrowRight","Enter"," "].includes(a)&&(e.preventDefault(),e.stopPropagation(),l())}),onPointerEnter:s(r.onPointerEnter,e=>{t||(e.currentTarget.focus(),n.openNow())}),onPointerLeave:s(r.onPointerLeave,()=>{t||n.scheduleClose()})})})});A.displayName="MenuSubTrigger";var K=o.forwardRef(({forceMount:t,loop:r=!0,side:p="end",align:n="start",sideOffset:m=0,...i},l)=>{let e=T("MenuSubContent"),a=b(l,e.contentRef),d=P(),u=D({orientation:"vertical",loop:r,itemSelector:M,typeahead:!0});return t||e.open?f(w,{[k]:"",children:f(v,{role:"menu","aria-orientation":"vertical",id:e.contentId,"data-state":e.open?"open":"closed",tabIndex:-1,side:p,align:n,sideOffset:m,...i,...C(e.family,"sub-content",i.className),ref:a,onKeyDown:s(i.onKeyDown,c=>{let R=g(c.key,c.currentTarget,d);R==="ArrowLeft"||R==="Escape"?(c.preventDefault(),e.closeNow(),e.triggerRef.current?.focus()):u(c),c.key!=="Tab"&&c.stopPropagation()}),onPointerEnter:s(i.onPointerEnter,e.openNow),onPointerLeave:s(i.onPointerLeave,e.scheduleClose)})}):null});K.displayName="MenuSubContent";export{k as MENU_BRANCH_ATTRIBUTE,O as MenuSub,K as MenuSubContent,A as MenuSubTrigger};

package/dist/utils/numberFormat.cjs

@@ -0,0 +1 @@
+"use strict";var s=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var b=(e,r)=>{for(var t in r)s(e,t,{get:r[t],enumerable:!0})},c=(e,r,t,u)=>{if(r&&typeof r=="object"||typeof r=="function")for(let n of l(r))!f.call(e,n)&&n!==t&&s(e,n,{get:()=>r[n],enumerable:!(u=p(r,n))||u.enumerable});return e};var g=e=>c(s({},"__esModule",{value:!0}),e);var I={};b(I,{formatNumberValue:()=>d,parseNumberValue:()=>F});module.exports=g(I);function d(e,r,t){return!r&&!t?String(e):new Intl.NumberFormat(r,t).format(e)}function F(e,r,t){let u=e.trim();if(u==="")return NaN;if(!r&&!t)return Number(u);let n=new Intl.NumberFormat(r,t).formatToParts(-12345.6),N=n.find(a=>a.type==="group")?.value,o=n.find(a=>a.type==="decimal")?.value??new Intl.NumberFormat(r).formatToParts(1.5).find(a=>a.type==="decimal")?.value??".",i=u.replace(/[\s\u00a0\u202f]/g,"").replace(/\u2212/g,"-");if(N&&(i=i.split(N).join("")),i=i.split(o).join(".").replace(/[^0-9.-]/g,""),!/[0-9]/.test(i))return NaN;let m=Number(i);return Number.isNaN(m)?NaN:t?.style==="percent"?m/100:m}0&&(module.exports={formatNumberValue,parseNumberValue});

package/dist/utils/numberFormat.d.cts

@@ -0,0 +1,19 @@
+/**
+ * `Intl.NumberFormat` display/parse pair for NumberField.
+ *
+ * With neither `locale` nor `formatOptions`, formatting is off and the value
+ * round-trips through `String`/`Number` exactly as it did before — the
+ * formatted path is opt-in.
+ *
+ * Percent follows `Intl.NumberFormat` semantics: the value is the *fraction*,
+ * so `0.5` displays as `50%` and typing `50%` parses back to `0.5`. `min`,
+ * `max` and `step` therefore also operate on the fraction.
+ */
+export declare function formatNumberValue(value: number, locale?: string, formatOptions?: Intl.NumberFormatOptions): string;
+/**
+ * Parses text the user typed or pasted back into a number, tolerating
+ * everything {@link formatNumberValue} can emit: group separators, the
+ * locale's decimal separator, currency symbols, unit suffixes, `%`, and the
+ * Unicode minus sign. Returns `NaN` when the text holds no number.
+ */
+export declare function parseNumberValue(text: string, locale?: string, formatOptions?: Intl.NumberFormatOptions): number;

package/dist/utils/numberFormat.d.ts

@@ -0,0 +1,19 @@
+/**
+ * `Intl.NumberFormat` display/parse pair for NumberField.
+ *
+ * With neither `locale` nor `formatOptions`, formatting is off and the value
+ * round-trips through `String`/`Number` exactly as it did before — the
+ * formatted path is opt-in.
+ *
+ * Percent follows `Intl.NumberFormat` semantics: the value is the *fraction*,
+ * so `0.5` displays as `50%` and typing `50%` parses back to `0.5`. `min`,
+ * `max` and `step` therefore also operate on the fraction.
+ */
+export declare function formatNumberValue(value: number, locale?: string, formatOptions?: Intl.NumberFormatOptions): string;
+/**
+ * Parses text the user typed or pasted back into a number, tolerating
+ * everything {@link formatNumberValue} can emit: group separators, the
+ * locale's decimal separator, currency symbols, unit suffixes, `%`, and the
+ * Unicode minus sign. Returns `NaN` when the text holds no number.
+ */
+export declare function parseNumberValue(text: string, locale?: string, formatOptions?: Intl.NumberFormatOptions): number;

package/dist/utils/numberFormat.js

@@ -0,0 +1 @@
+function o(u,r,e){return!r&&!e?String(u):new Intl.NumberFormat(r,e).format(u)}function p(u,r,e){let i=u.trim();if(i==="")return NaN;if(!r&&!e)return Number(i);let m=new Intl.NumberFormat(r,e).formatToParts(-12345.6),s=m.find(n=>n.type==="group")?.value,N=m.find(n=>n.type==="decimal")?.value??new Intl.NumberFormat(r).formatToParts(1.5).find(n=>n.type==="decimal")?.value??".",t=i.replace(/[\s\u00a0\u202f]/g,"").replace(/\u2212/g,"-");if(s&&(t=t.split(s).join("")),t=t.split(N).join(".").replace(/[^0-9.-]/g,""),!/[0-9]/.test(t))return NaN;let a=Number(t);return Number.isNaN(a)?NaN:e?.style==="percent"?a/100:a}export{o as formatNumberValue,p as parseNumberValue};

package/dist/utils/part.cjs

@@ -0,0 +1 @@
+"use strict";var i=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var c=Object.prototype.hasOwnProperty;var x=(s,t)=>{for(var r in t)i(s,r,{get:t[r],enumerable:!0})},f=(s,t,r,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of u(t))!c.call(s,n)&&n!==r&&i(s,n,{get:()=>t[n],enumerable:!(a=d(t,n))||a.enumerable});return s};var g=s=>f(i({},"__esModule",{value:!0}),s);var b={};x(b,{skdxPart:()=>l});module.exports=g(b);function k(...s){let t="";for(let r of s)r&&(t=t?`${t} ${r}`:r);return t}function l(s,t,r,a){let n=t==="root",o=n?`skdx-${s}`:`skdx-${s}__${t}`,e={className:k(o,r),"data-part":t};return n&&(e["data-skdx-component"]=a??s),e}0&&(module.exports={skdxPart});

package/dist/utils/part.d.cts

@@ -0,0 +1,97 @@
+/**
+ * The styling hook every part of every component emits.
+ *
+ * Why this exists
+ * ---------------
+ * The React package is headless: importing it must never pull in CSS, and it
+ * still doesn't — this file emits *class names*, not styles. A class name with
+ * no stylesheet behind it is inert, so `@skdx/react` on its own renders
+ * exactly the markup it always did, plus an attribute a stylesheet may or may
+ * not match. That is the whole trade: components stay unstyled, but they stop
+ * being *unstylable* without the consumer inventing their own class for every
+ * part.
+ *
+ * Before this, 85% of the package's DOM had no stable selector at all. A
+ * consumer wanting to style an accordion trigger had to either wrap it in
+ * their own element or reach in with a structural selector like
+ * `[data-state] > button`, which breaks the moment the anatomy changes. The 15%
+ * that *were* addressable used ad-hoc `data-skdx-accordion-trigger` attributes,
+ * added case by case, with no rule for when a part earned one.
+ *
+ * The contract this emits
+ * -----------------------
+ * For a root part:
+ *
+ * ```html
+ * <button class="skdx-button" data-skdx-component="button" data-part="root">
+ * ```
+ *
+ * For a non-root part:
+ *
+ * ```html
+ * <span class="skdx-button__icon" data-part="icon">
+ * ```
+ *
+ * Three hooks, because each answers a different question and no one of them
+ * answers all three:
+ *
+ *   - `class` is what a stylesheet matches. `:where(.skdx-button)` gives
+ *     `@skdx/skins` zero specificity, so a consumer's own single class beats
+ *     it without `!important`.
+ *   - `data-skdx-component` identifies the *family* on the root only, so
+ *     `[data-skdx-component="button"]` finds every button regardless of which
+ *     part classes a consumer has since overridden.
+ *   - `data-part` names the part in the same vocabulary the Web Components
+ *     package already exposes through `::part()`, which is what keeps a skin
+ *     written against React reusable against `<skdx-button>`.
+ *
+ * Part names are not invented here. They come from each family's existing
+ * `styling.cssParts` in `@skdx/shared` — the vocabulary
+ * `packages/web-components` already ships and `scripts/contract-parts.mjs`
+ * already enforces — so the two frameworks cannot drift apart by construction.
+ *
+ * @see docs/architecture/component-styling-contract.md
+ */
+/** 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;
+}
+/**
+ * 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.
+ *
+ * @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.
+ *
+ * @example
+ * ```tsx
+ * skdxPart('button', 'root', 'product-save');
+ * // => { className: 'skdx-button product-save', 'data-part': 'root', 'data-skdx-component': 'button' }
+ *
+ * skdxPart('button', 'icon');
+ * // => { className: 'skdx-button__icon', 'data-part': 'icon' }
+ * ```
+ */
+export declare function skdxPart(component: string, part: string, className?: string, inheritedComponent?: string): SkdxPartAttributes;

package/dist/utils/part.d.ts

@@ -0,0 +1,97 @@
+/**
+ * The styling hook every part of every component emits.
+ *
+ * Why this exists
+ * ---------------
+ * The React package is headless: importing it must never pull in CSS, and it
+ * still doesn't — this file emits *class names*, not styles. A class name with
+ * no stylesheet behind it is inert, so `@skdx/react` on its own renders
+ * exactly the markup it always did, plus an attribute a stylesheet may or may
+ * not match. That is the whole trade: components stay unstyled, but they stop
+ * being *unstylable* without the consumer inventing their own class for every
+ * part.
+ *
+ * Before this, 85% of the package's DOM had no stable selector at all. A
+ * consumer wanting to style an accordion trigger had to either wrap it in
+ * their own element or reach in with a structural selector like
+ * `[data-state] > button`, which breaks the moment the anatomy changes. The 15%
+ * that *were* addressable used ad-hoc `data-skdx-accordion-trigger` attributes,
+ * added case by case, with no rule for when a part earned one.
+ *
+ * The contract this emits
+ * -----------------------
+ * For a root part:
+ *
+ * ```html
+ * <button class="skdx-button" data-skdx-component="button" data-part="root">
+ * ```
+ *
+ * For a non-root part:
+ *
+ * ```html
+ * <span class="skdx-button__icon" data-part="icon">
+ * ```
+ *
+ * Three hooks, because each answers a different question and no one of them
+ * answers all three:
+ *
+ *   - `class` is what a stylesheet matches. `:where(.skdx-button)` gives
+ *     `@skdx/skins` zero specificity, so a consumer's own single class beats
+ *     it without `!important`.
+ *   - `data-skdx-component` identifies the *family* on the root only, so
+ *     `[data-skdx-component="button"]` finds every button regardless of which
+ *     part classes a consumer has since overridden.
+ *   - `data-part` names the part in the same vocabulary the Web Components
+ *     package already exposes through `::part()`, which is what keeps a skin
+ *     written against React reusable against `<skdx-button>`.
+ *
+ * Part names are not invented here. They come from each family's existing
+ * `styling.cssParts` in `@skdx/shared` — the vocabulary
+ * `packages/web-components` already ships and `scripts/contract-parts.mjs`
+ * already enforces — so the two frameworks cannot drift apart by construction.
+ *
+ * @see docs/architecture/component-styling-contract.md
+ */
+/** 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;
+}
+/**
+ * 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.
+ *
+ * @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.
+ *
+ * @example
+ * ```tsx
+ * skdxPart('button', 'root', 'product-save');
+ * // => { className: 'skdx-button product-save', 'data-part': 'root', 'data-skdx-component': 'button' }
+ *
+ * skdxPart('button', 'icon');
+ * // => { className: 'skdx-button__icon', 'data-part': 'icon' }
+ * ```
+ */
+export declare function skdxPart(component: string, part: string, className?: string, inheritedComponent?: string): SkdxPartAttributes;

package/dist/utils/part.js

@@ -0,0 +1 @@
+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};

package/dist/utils/popper.cjs

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

package/dist/utils/popper.d.cts

@@ -0,0 +1,116 @@
+import * as React from 'react';
+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';
+interface PopperContextValue {
+    anchor: HTMLElement | null;
+    setAnchor: (node: HTMLElement | null) => void;
+}
+declare const usePopperContext: (consumerName: string) => PopperContextValue;
+/** @internal Provides the anchor element to descendant `Popper*` parts; wrap the anchor and content in one. */
+export declare function PopperRoot({ children }: {
+    children: React.ReactNode;
+}): 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>>;
+/** @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.
+     * @default 'bottom'
+     */
+    side?: Side;
+    /**
+     * Alignment along the chosen side. A consuming component may override this default.
+     * @default 'center'
+     */
+    align?: Align;
+    /**
+     * Distance in pixels between the content and the anchor along `side`. A consuming component may override this default.
+     * @default 0
+     */
+    sideOffset?: number;
+    /**
+     * Offset in pixels along `align`, shifting the content perpendicular to `side`.
+     * @default 0
+     */
+    alignOffset?: number;
+    /**
+     * Flips to the opposite side when there isn't room to render on the preferred side.
+     * @default true
+     */
+    avoidCollisions?: boolean;
+    /**
+     * 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>>;
+    /**
+     * 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;
+}
+/**
+ * @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;
+}
+/**
+ * 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>>;
+/** @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 { usePopperContext };

package/dist/utils/popper.d.ts

@@ -0,0 +1,116 @@
+import * as React from 'react';
+import { type PrimitivePropsWithRef } from './primitive.js';
+/**
+ * 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';
+interface PopperContextValue {
+    anchor: HTMLElement | null;
+    setAnchor: (node: HTMLElement | null) => void;
+}
+declare const usePopperContext: (consumerName: string) => PopperContextValue;
+/** @internal Provides the anchor element to descendant `Popper*` parts; wrap the anchor and content in one. */
+export declare function PopperRoot({ children }: {
+    children: React.ReactNode;
+}): 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>>;
+/** @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.
+     * @default 'bottom'
+     */
+    side?: Side;
+    /**
+     * Alignment along the chosen side. A consuming component may override this default.
+     * @default 'center'
+     */
+    align?: Align;
+    /**
+     * Distance in pixels between the content and the anchor along `side`. A consuming component may override this default.
+     * @default 0
+     */
+    sideOffset?: number;
+    /**
+     * Offset in pixels along `align`, shifting the content perpendicular to `side`.
+     * @default 0
+     */
+    alignOffset?: number;
+    /**
+     * Flips to the opposite side when there isn't room to render on the preferred side.
+     * @default true
+     */
+    avoidCollisions?: boolean;
+    /**
+     * 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>>;
+    /**
+     * 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;
+}
+/**
+ * @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;
+}
+/**
+ * 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>>;
+/** @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 { usePopperContext };

package/dist/utils/popper.js

@@ -0,0 +1 @@
+import{arrow as k,autoUpdate as I,flip as X,limitShift as Y,offset as B,shift as F,size as G,useFloating as V}from"@floating-ui/react-dom";import*as r from"react";import{useComposedRefs as f}from"./composeRefs.js";import{createSafeContext as _}from"./createContext.js";import{resolveDirection as z,resolvePhysicalSide as U,useDirection as j}from"./direction.js";import{Primitive as P}from"./primitive.js";import{jsx as d}from"react/jsx-runtime";var[q,x]=_("Popper");function le({children:e}){let[t,n]=r.useState(null);return d(q,{anchor:t,setAnchor:n,children:e})}var J=r.forwardRef((e,t)=>{let n=x("PopperAnchor"),s=f(t,i=>n.setAnchor(i));return d(P.div,{...e,ref:s})});J.displayName="PopperAnchor";function K(e,t){return t==="center"?e:`${e}-${t}`}var Q={start:"0%",center:"50%",end:"100%"};function Z(e,t,n){let{availableWidth:s,availableHeight:i,triggerWidth:p,side:a,align:l}=n,o=Q[l],c=a==="top"||a==="bottom"?`${o} ${a==="top"?"100%":"0%"}`:`${a==="left"?"100%":"0%"} ${o}`;e.style.setProperty(`--skdx-${t}-available-width`,`${s}px`),e.style.setProperty(`--skdx-${t}-available-height`,`${i}px`),e.style.setProperty(`--skdx-${t}-trigger-width`,`${p}px`),e.style.setProperty(`--skdx-${t}-transform-origin`,c)}var R=r.createContext(null),ee=r.forwardRef((e,t)=>{let{side:n="bottom",align:s="center",sideOffset:i=0,alignOffset:p=0,avoidCollisions:a=!0,collisionPadding:l=8,collisionBoundary:o,component:c,style:v,...w}=e,u=x("PopperContent"),h=r.useRef(null),b=j(),S=z(u.anchor,b),m=o?{boundary:o}:{},{refs:A,floatingStyles:C,placement:E,middlewareData:g}=V({placement:K(U(n,S),s),whileElementsMounted:I,elements:{reference:u.anchor},middleware:[B({mainAxis:i,alignmentAxis:p}),...a?[X({padding:l,...m}),F({padding:l,limiter:Y(),...m})]:[],G({padding:l,...m,apply({availableWidth:M,availableHeight:L,elements:O,rects:T,placement:W}){if(!c)return;let[D,N="center"]=W.split("-");Z(O.floating,c,{availableWidth:M,availableHeight:L,triggerWidth:T.reference.width,side:D,align:N})}}),k({element:h})]}),$=f(t,A.setFloating),[y,H="center"]=E.split("-");return d(R.Provider,{value:{arrowRef:h,arrowX:g.arrow?.x,arrowY:g.arrow?.y,side:y},children:d(P.div,{"data-side":y,"data-align":H,...w,ref:$,style:{...C,...v}})})});ee.displayName="PopperContent";var te={top:"bottom",right:"left",bottom:"top",left:"right"},re=r.forwardRef((e,t)=>{let n=r.useContext(R);if(!n)throw new Error("[skandadx] PopperArrow must be used within PopperContent.");let{arrowRef:s,arrowX:i,arrowY:p,side:a}=n,l=f(t,s),o=te[a];return d(P.span,{...e,ref:l,style:{position:"absolute",left:i!=null?`${i}px`:void 0,top:p!=null?`${p}px`:void 0,[o]:void 0,...o==="top"&&{top:0,transform:"translateY(-100%)"},...o==="bottom"&&{bottom:0,transform:"translateY(100%)"},...o==="left"&&{left:0,transform:"translateX(-100%)"},...o==="right"&&{right:0,transform:"translateX(100%)"},...e.style}})});re.displayName="PopperArrow";export{J as PopperAnchor,re as PopperArrow,ee as PopperContent,le as PopperRoot,Z as setMeasurementProperties,x as usePopperContext};

package/dist/utils/portal.cjs

@@ -0,0 +1 @@
+"use strict";var d=Object.create;var i=Object.defineProperty;var R=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty;var D=(t,e)=>{for(var o in e)i(t,o,{get:e[o],enumerable:!0})},c=(t,e,o,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of v(e))!h.call(t,r)&&r!==o&&i(t,r,{get:()=>e[r],enumerable:!(n=R(e,r))||n.enumerable});return t};var s=(t,e,o)=>(o=t!=null?d(y(t)):{},c(e||!t||!t.__esModule?i(o,"default",{value:t,enumerable:!0}):o,t)),E=t=>c(i({},"__esModule",{value:!0}),t);var M={};D(M,{Portal:()=>P});module.exports=E(M);var a=s(require("react"),1),m=s(require("react-dom"),1),p=require("./primitive.cjs"),f=require("react/jsx-runtime"),P=a.forwardRef((t,e)=>{let{container:o,...n}=t,[r,u]=a.useState(!1);a.useLayoutEffect(()=>u(!0),[]);let l=o??(r?globalThis?.document?.body:null);return l?m.default.createPortal((0,f.jsx)(p.Primitive.div,{...n,ref:e}),l):null});P.displayName="Portal";0&&(module.exports={Portal});