@cdx-ui/primitives 0.0.1-beta.12 → 0.0.1-beta.120

package/lib/commonjs/dialog/DialogOverlay.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DialogOverlay = void 0;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _slot = require("../slot");
+var _dataAttributes = require("../utils/dataAttributes");
+var _context = require("./context");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Backdrop overlay that dismisses the dialog on press (when closeOnBackdropPress
+ * is enabled). Supports `forceMount` for exit animation coordination.
+ *
+ * Unstyled — the styled layer applies opacity/color via className.
+ */
+const DialogOverlay = exports.DialogOverlay = /*#__PURE__*/(0, _react.forwardRef)(({
+  asChild = false,
+  forceMount = false,
+  onPress,
+  ...props
+}, ref) => {
+  const {
+    open,
+    onOpenChange,
+    closeOnBackdropPress
+  } = (0, _context.useDialog)();
+  const handlePress = (0, _react.useCallback)(e => {
+    if (closeOnBackdropPress) {
+      onOpenChange(false);
+    }
+    if (typeof onPress === 'function') {
+      onPress(e);
+    }
+  }, [closeOnBackdropPress, onOpenChange, onPress]);
+  if (!forceMount && !open) {
+    return null;
+  }
+  const Comp = asChild ? _slot.Slot : _reactNative.Pressable;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, {
+    ref: ref,
+    accessible: false,
+    importantForAccessibility: "no-hide-descendants",
+    onPress: handlePress,
+    ...props,
+    ...(0, _dataAttributes.mergeDataAttributes)(props, (0, _dataAttributes.dataAttributes)({
+      slot: 'dialog-overlay'
+    }))
+  });
+});
+DialogOverlay.displayName = 'DialogOverlay';
+//# sourceMappingURL=DialogOverlay.js.map

package/lib/commonjs/dialog/DialogOverlay.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","_reactNative","_slot","_dataAttributes","_context","_jsxRuntime","DialogOverlay","exports","forwardRef","asChild","forceMount","onPress","props","ref","open","onOpenChange","closeOnBackdropPress","useDialog","handlePress","useCallback","e","Comp","Slot","Pressable","jsx","accessible","importantForAccessibility","mergeDataAttributes","dataAttributes","slot","displayName"],"sourceRoot":"../../../src","sources":["dialog/DialogOverlay.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AACA,IAAAG,eAAA,GAAAH,OAAA;AACA,IAAAI,QAAA,GAAAJ,OAAA;AAAsC,IAAAK,WAAA,GAAAL,OAAA;AAKtC;AACA;AACA;AACA;AACA;AACA;AACO,MAAMM,aAAa,GAAAC,OAAA,CAAAD,aAAA,gBAAG,IAAAE,iBAAU,EACrC,CAAC;EAAEC,OAAO,GAAG,KAAK;EAAEC,UAAU,GAAG,KAAK;EAAEC,OAAO;EAAE,GAAGC;AAAM,CAAC,EAAEC,GAAG,KAAK;EACnE,MAAM;IAAEC,IAAI;IAAEC,YAAY;IAAEC;EAAqB,CAAC,GAAG,IAAAC,kBAAS,EAAC,CAAC;EAEhE,MAAMC,WAAW,GAAG,IAAAC,kBAAW,EAC5BC,CAAM,IAAK;IACV,IAAIJ,oBAAoB,EAAE;MACxBD,YAAY,CAAC,KAAK,CAAC;IACrB;IACA,IAAI,OAAOJ,OAAO,KAAK,UAAU,EAAE;MACjCA,OAAO,CAACS,CAAC,CAAC;IACZ;EACF,CAAC,EACD,CAACJ,oBAAoB,EAAED,YAAY,EAAEJ,OAAO,CAC9C,CAAC;EAED,IAAI,CAACD,UAAU,IAAI,CAACI,IAAI,EAAE;IACxB,OAAO,IAAI;EACb;EAEA,MAAMO,IAAI,GAAGZ,OAAO,GAAGa,UAAI,GAAGC,sBAAS;EAEvC,oBACE,IAAAlB,WAAA,CAAAmB,GAAA,EAACH,IAAI;IACHR,GAAG,EAAEA,GAAI;IACTY,UAAU,EAAE,KAAM;IAClBC,yBAAyB,EAAC,qBAAqB;IAC/Cf,OAAO,EAAEO,WAAY;IAAA,GAChBN,KAAK;IAAA,GACN,IAAAe,mCAAmB,EAACf,KAAK,EAAE,IAAAgB,8BAAc,EAAC;MAAEC,IAAI,EAAE;IAAiB,CAAC,CAAC;EAAC,CAC3E,CAAC;AAEN,CACF,CAAC;AAEDvB,aAAa,CAACwB,WAAW,GAAG,eAAe","ignoreList":[]}

package/lib/commonjs/dialog/DialogPopup.js

@@ -0,0 +1,161 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DialogPopup = void 0;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _focus = require("@react-native-aria/focus");
+var _slot = require("../slot");
+var _overlay = require("../overlay");
+var _createPortal = require("../utils/createPortal");
+var _dataAttributes = require("../utils/dataAttributes");
+var _context = require("./context");
+var _jsxRuntime = require("react/jsx-runtime");
+const DialogPopup = exports.DialogPopup = /*#__PURE__*/(0, _react.forwardRef)(({
+  asChild,
+  children,
+  forceMount = false,
+  avoidKeyboard = true,
+  keyboardVerticalOffset = 0,
+  overlayClassName,
+  ...props
+}, ref) => {
+  const {
+    open,
+    onOpenChange,
+    closeOnBackdropPress,
+    closeOnEscKey,
+    nativeID,
+    role
+  } = (0, _context.useDialog)();
+  const handleClose = (0, _react.useCallback)(() => {
+    onOpenChange(false);
+  }, [onOpenChange]);
+  (0, _overlay.useEscapeKey)(open && closeOnEscKey, handleClose);
+  if (!(open || forceMount)) {
+    return null;
+  }
+  const overlayProps = {
+    ...(closeOnBackdropPress ? {
+      onPress: handleClose
+    } : {}),
+    accessible: false,
+    importantForAccessibility: 'no-hide-descendants',
+    className: overlayClassName,
+    ...(0, _dataAttributes.dataAttributes)({
+      slot: 'dialog-overlay'
+    })
+  };
+  const ariaProps = {
+    role,
+    'aria-modal': true,
+    'aria-labelledby': `${nativeID}-title`,
+    'aria-describedby': `${nativeID}-description`
+  };
+  const popupAttrs = (0, _dataAttributes.mergeDataAttributes)(props, (0, _dataAttributes.dataAttributes)({
+    state: open ? 'open' : 'closed'
+  }));
+  const Comp = asChild ? _slot.Slot : _reactNative.View;
+  if (_reactNative.Platform.OS === 'web' && _createPortal.createPortalFn) {
+    return (0, _createPortal.createPortalFn)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_focus.FocusScope, {
+      contain: open,
+      restoreFocus: true,
+      autoFocus: open,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: {
+          position: 'fixed',
+          inset: 0,
+          zIndex: 50,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center'
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+          ...overlayProps
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, {
+          ref: ref,
+          ...props,
+          ...ariaProps,
+          ...popupAttrs,
+          children: children
+        })]
+      })
+    }), document.body);
+  }
+
+  // Native layout uses two layers to support both backdrop dismiss and
+  // scrollable body content. The overlay Pressable fills the Modal via
+  // absolute positioning and handles backdrop taps. A second flex layer with
+  // pointerEvents="box-none" centers the content panel — "box-none" lets taps
+  // outside the panel pass through to the overlay while allowing the panel and
+  // its children to receive touches normally.
+  //
+  // That centering layer is a KeyboardAvoidingView so the panel (including its
+  // footer/actions, which sit at the bottom of a centered, max-h-capped panel)
+  // shifts up to clear the on-screen keyboard. `behavior` is platform-specific
+  // and the layer is a no-op while no input is focused. The RN Modal renders in
+  // its own window, so this MUST live here — a KeyboardAvoidingView wrapping the
+  // <Dialog> at the usage level cannot reach this subtree. Web is unaffected
+  // (the browser handles focus scrolling; there is no occluding keyboard).
+  //
+  // Critically, the content panel must NOT claim the JS touch responder
+  // (e.g. via onStartShouldSetResponder). Doing so triggers React Native's
+  // blockNativeResponder, which suppresses the native UIScrollView /
+  // ScrollView pan gesture recognizer and breaks any ScrollView inside
+  // Dialog.Content.
+  //
+  // Static StyleSheet used here because these are structural layout concerns
+  // of the primitive's modal chrome — not themeable styles. They must remain
+  // stable regardless of the styled layer's className.
+  const keyboardBehavior = avoidKeyboard ? _reactNative.Platform.select({
+    ios: 'padding',
+    default: 'height'
+  }) : undefined;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Modal, {
+    visible: open,
+    transparent: true,
+    statusBarTranslucent: true,
+    onRequestClose: handleClose,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_focus.FocusScope, {
+      contain: open,
+      restoreFocus: true,
+      autoFocus: open,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.fill,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+          ...overlayProps
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.KeyboardAvoidingView, {
+          style: styles.center,
+          pointerEvents: "box-none",
+          behavior: keyboardBehavior,
+          keyboardVerticalOffset: keyboardVerticalOffset,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, {
+            ref: ref,
+            ...props,
+            ...ariaProps,
+            ...popupAttrs,
+            children: children
+          })
+        })]
+      })
+    })
+  });
+});
+DialogPopup.displayName = 'DialogPopup';
+
+// Structural layout for the native Modal chrome. These are not themeable —
+// they position the overlay and centering layers that the primitive manages
+// internally. Matches the pattern in OverlayContainer.tsx.
+const styles = _reactNative.StyleSheet.create({
+  fill: {
+    flex: 1
+  },
+  center: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+});
+//# sourceMappingURL=DialogPopup.js.map

package/lib/commonjs/dialog/DialogPopup.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","_reactNative","_focus","_slot","_overlay","_createPortal","_dataAttributes","_context","_jsxRuntime","DialogPopup","exports","forwardRef","asChild","children","forceMount","avoidKeyboard","keyboardVerticalOffset","overlayClassName","props","ref","open","onOpenChange","closeOnBackdropPress","closeOnEscKey","nativeID","role","useDialog","handleClose","useCallback","useEscapeKey","overlayProps","onPress","accessible","importantForAccessibility","className","dataAttributes","slot","ariaProps","popupAttrs","mergeDataAttributes","state","Comp","Slot","View","Platform","OS","createPortalFn","jsx","FocusScope","contain","restoreFocus","autoFocus","jsxs","style","position","inset","zIndex","display","alignItems","justifyContent","Pressable","document","body","keyboardBehavior","select","ios","default","undefined","Modal","visible","transparent","statusBarTranslucent","onRequestClose","styles","fill","KeyboardAvoidingView","center","pointerEvents","behavior","displayName","StyleSheet","create","flex"],"sourceRoot":"../../../src","sources":["dialog/DialogPopup.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/dialog/DialogPortal.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DialogPortal = DialogPortal;
+var _portal = require("../portal");
+var _context = require("./context");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Mounts dialog children into the shared PortalHost. Re-provides DialogContext
+ * inside the portal boundary (React context does not cross the portal store).
+ *
+ * When `forceMount` is false (default), the portal is unmounted when the
+ * dialog is closed. Set `forceMount={true}` to keep the portal mounted so
+ * exit animations can play before the styled layer removes it from the tree.
+ */
+function DialogPortal({
+  forceMount = false,
+  hostName,
+  children
+}) {
+  const ctx = (0, _context.useDialog)();
+  if (!forceMount && !ctx.open) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_portal.Portal, {
+    name: `${ctx.nativeID}-portal`,
+    hostName: hostName,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.DialogProvider, {
+      value: ctx,
+      children: children
+    })
+  });
+}
+DialogPortal.displayName = 'DialogPortal';
+//# sourceMappingURL=DialogPortal.js.map

package/lib/commonjs/dialog/DialogPortal.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_portal","require","_context","_jsxRuntime","DialogPortal","forceMount","hostName","children","ctx","useDialog","open","jsx","Portal","name","nativeID","DialogProvider","value","displayName"],"sourceRoot":"../../../src","sources":["dialog/DialogPortal.tsx"],"mappings":";;;;;;AAAA,IAAAA,OAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAAsD,IAAAE,WAAA,GAAAF,OAAA;AAKtD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASG,YAAYA,CAAC;EAAEC,UAAU,GAAG,KAAK;EAAEC,QAAQ;EAAEC;AAA4B,CAAC,EAAE;EAC1F,MAAMC,GAAG,GAAG,IAAAC,kBAAS,EAAC,CAAC;EAEvB,IAAI,CAACJ,UAAU,IAAI,CAACG,GAAG,CAACE,IAAI,EAAE;IAC5B,OAAO,IAAI;EACb;EAEA,oBACE,IAAAP,WAAA,CAAAQ,GAAA,EAACX,OAAA,CAAAY,MAAM;IAACC,IAAI,EAAE,GAAGL,GAAG,CAACM,QAAQ,SAAU;IAACR,QAAQ,EAAEA,QAAS;IAAAC,QAAA,eACzD,IAAAJ,WAAA,CAAAQ,GAAA,EAACT,QAAA,CAAAa,cAAc;MAACC,KAAK,EAAER,GAAI;MAAAD,QAAA,EAAEA;IAAQ,CAAiB;EAAC,CACjD,CAAC;AAEb;AAEAH,YAAY,CAACa,WAAW,GAAG,cAAc","ignoreList":[]}

package/lib/commonjs/dialog/DialogRoot.js

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DialogRoot = void 0;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _utils = require("@cdx-ui/utils");
+var _slot = require("../slot");
+var _dataAttributes = require("../utils/dataAttributes");
+var _context = require("./context");
+var _jsxRuntime = require("react/jsx-runtime");
+const DialogRoot = exports.DialogRoot = /*#__PURE__*/(0, _react.forwardRef)(({
+  open: openProp,
+  onOpenChange,
+  defaultOpen = false,
+  closeOnBackdropPress = true,
+  closeOnEscKey = true,
+  role = 'dialog',
+  asChild,
+  children,
+  ...props
+}, ref) => {
+  const [open, setOpenState] = (0, _utils.useControllableState)({
+    prop: openProp,
+    defaultProp: defaultOpen,
+    onChange: onOpenChange
+  });
+  const setOpen = (0, _react.useCallback)(newOpen => {
+    setOpenState(newOpen);
+  }, [setOpenState]);
+  const id = (0, _react.useId)();
+  const nativeID = `dialog-${id}`;
+  const contextValue = (0, _react.useMemo)(() => ({
+    open: open ?? false,
+    onOpenChange: setOpen,
+    closeOnBackdropPress,
+    closeOnEscKey,
+    nativeID,
+    role
+  }), [open, setOpen, closeOnBackdropPress, closeOnEscKey, nativeID, role]);
+  const Comp = asChild ? _slot.Slot : _reactNative.View;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.DialogProvider, {
+    value: contextValue,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, {
+      ref: ref,
+      ...props,
+      ...(0, _dataAttributes.mergeDataAttributes)(props, (0, _dataAttributes.dataAttributes)({
+        state: open ? 'open' : 'closed'
+      })),
+      children: children
+    })
+  });
+});
+DialogRoot.displayName = 'DialogRoot';
+//# sourceMappingURL=DialogRoot.js.map

package/lib/commonjs/dialog/DialogRoot.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","_reactNative","_utils","_slot","_dataAttributes","_context","_jsxRuntime","DialogRoot","exports","forwardRef","open","openProp","onOpenChange","defaultOpen","closeOnBackdropPress","closeOnEscKey","role","asChild","children","props","ref","setOpenState","useControllableState","prop","defaultProp","onChange","setOpen","useCallback","newOpen","id","useId","nativeID","contextValue","useMemo","Comp","Slot","View","jsx","DialogProvider","value","mergeDataAttributes","dataAttributes","state","displayName"],"sourceRoot":"../../../src","sources":["dialog/DialogRoot.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,KAAA,GAAAH,OAAA;AACA,IAAAI,eAAA,GAAAJ,OAAA;AACA,IAAAK,QAAA,GAAAL,OAAA;AAA2C,IAAAM,WAAA,GAAAN,OAAA;AAOpC,MAAMO,UAAU,GAAAC,OAAA,CAAAD,UAAA,gBAAG,IAAAE,iBAAU,EAClC,CACE;EACEC,IAAI,EAAEC,QAAQ;EACdC,YAAY;EACZC,WAAW,GAAG,KAAK;EACnBC,oBAAoB,GAAG,IAAI;EAC3BC,aAAa,GAAG,IAAI;EACpBC,IAAI,GAAG,QAAQ;EACfC,OAAO;EACPC,QAAQ;EACR,GAAGC;AACL,CAAC,EACDC,GAAG,KACA;EACH,MAAM,CAACV,IAAI,EAAEW,YAAY,CAAC,GAAG,IAAAC,2BAAoB,EAAU;IACzDC,IAAI,EAAEZ,QAAQ;IACda,WAAW,EAAEX,WAAW;IACxBY,QAAQ,EAAEb;EACZ,CAAC,CAAC;EAEF,MAAMc,OAAO,GAAG,IAAAC,kBAAW,EACxBC,OAAgB,IAAK;IACpBP,YAAY,CAACO,OAAO,CAAC;EACvB,CAAC,EACD,CAACP,YAAY,CACf,CAAC;EAED,MAAMQ,EAAE,GAAG,IAAAC,YAAK,EAAC,CAAC;EAClB,MAAMC,QAAQ,GAAG,UAAUF,EAAE,EAAE;EAE/B,MAAMG,YAAY,GAAG,IAAAC,cAAO,EAC1B,OAAO;IACLvB,IAAI,EAAEA,IAAI,IAAI,KAAK;IACnBE,YAAY,EAAEc,OAAO;IACrBZ,oBAAoB;IACpBC,aAAa;IACbgB,QAAQ;IACRf;EACF,CAAC,CAAC,EACF,CAACN,IAAI,EAAEgB,OAAO,EAAEZ,oBAAoB,EAAEC,aAAa,EAAEgB,QAAQ,EAAEf,IAAI,CACrE,CAAC;EAED,MAAMkB,IAAI,GAAGjB,OAAO,GAAGkB,UAAI,GAAGC,iBAAI;EAElC,oBACE,IAAA9B,WAAA,CAAA+B,GAAA,EAAChC,QAAA,CAAAiC,cAAc;IAACC,KAAK,EAAEP,YAAa;IAAAd,QAAA,eAClC,IAAAZ,WAAA,CAAA+B,GAAA,EAACH,IAAI;MACHd,GAAG,EAAEA,GAAI;MAAA,GACJD,KAAK;MAAA,GACN,IAAAqB,mCAAmB,EAACrB,KAAK,EAAE,IAAAsB,8BAAc,EAAC;QAAEC,KAAK,EAAEhC,IAAI,GAAG,MAAM,GAAG;MAAS,CAAC,CAAC,CAAC;MAAAQ,QAAA,EAElFA;IAAQ,CACL;EAAC,CACO,CAAC;AAErB,CACF,CAAC;AAEDX,UAAU,CAACoC,WAAW,GAAG,YAAY","ignoreList":[]}

package/lib/commonjs/dialog/DialogTrigger.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DialogTrigger = void 0;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _utils = require("@cdx-ui/utils");
+var _slot = require("../slot");
+var _context = require("./context");
+var _jsxRuntime = require("react/jsx-runtime");
+const DialogTrigger = exports.DialogTrigger = /*#__PURE__*/(0, _react.forwardRef)(({
+  asChild = false,
+  children,
+  onPress,
+  ...props
+}, ref) => {
+  const {
+    onOpenChange
+  } = (0, _context.useDialog)();
+  const handlePress = (0, _utils.composeEventHandlers)(onPress, () => onOpenChange(true));
+  const Comp = asChild ? _slot.Slot : _reactNative.Pressable;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, {
+    ref: ref,
+    ...props,
+    onPress: handlePress,
+    children: children
+  });
+});
+DialogTrigger.displayName = 'DialogTrigger';
+//# sourceMappingURL=DialogTrigger.js.map

package/lib/commonjs/dialog/DialogTrigger.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","_reactNative","_utils","_slot","_context","_jsxRuntime","DialogTrigger","exports","forwardRef","asChild","children","onPress","props","ref","onOpenChange","useDialog","handlePress","composeEventHandlers","Comp","Slot","Pressable","jsx","displayName"],"sourceRoot":"../../../src","sources":["dialog/DialogTrigger.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,KAAA,GAAAH,OAAA;AACA,IAAAI,QAAA,GAAAJ,OAAA;AAAsC,IAAAK,WAAA,GAAAL,OAAA;AAK/B,MAAMM,aAAa,GAAAC,OAAA,CAAAD,aAAA,gBAAG,IAAAE,iBAAU,EACrC,CAAC;EAAEC,OAAO,GAAG,KAAK;EAAEC,QAAQ;EAAEC,OAAO;EAAE,GAAGC;AAAM,CAAC,EAAEC,GAAG,KAAK;EACzD,MAAM;IAAEC;EAAa,CAAC,GAAG,IAAAC,kBAAS,EAAC,CAAC;EAEpC,MAAMC,WAAW,GAAG,IAAAC,2BAAoB,EAACN,OAAO,EAAE,MAAMG,YAAY,CAAC,IAAI,CAAC,CAAC;EAE3E,MAAMI,IAAI,GAAGT,OAAO,GAAGU,UAAI,GAAGC,sBAAS;EAEvC,oBACE,IAAAf,WAAA,CAAAgB,GAAA,EAACH,IAAI;IAACL,GAAG,EAAEA,GAAI;IAAA,GAAMD,KAAK;IAAqBD,OAAO,EAAEK,WAAY;IAAAN,QAAA,EACjEA;EAAQ,CACL,CAAC;AAEX,CACF,CAAC;AAEDJ,aAAa,CAACgB,WAAW,GAAG,eAAe","ignoreList":[]}

package/lib/commonjs/dialog/index.js

@@ -3,58 +3,66 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "DialogClose", {
+  enumerable: true,
+  get: function () {
+    return _DialogClose.DialogClose;
+  }
+});
+Object.defineProperty(exports, "DialogContent", {
+  enumerable: true,
+  get: function () {
+    return _DialogContent.DialogContent;
+  }
+});
+Object.defineProperty(exports, "DialogOverlay", {
+  enumerable: true,
+  get: function () {
+    return _DialogOverlay.DialogOverlay;
+  }
+});
+Object.defineProperty(exports, "DialogPopup", {
+  enumerable: true,
+  get: function () {
+    return _DialogPopup.DialogPopup;
+  }
+});
+Object.defineProperty(exports, "DialogPortal", {
+  enumerable: true,
+  get: function () {
+    return _DialogPortal.DialogPortal;
+  }
+});
 Object.defineProperty(exports, "DialogProvider", {
   enumerable: true,
   get: function () {
     return _context.DialogProvider;
   }
 });
-exports.createDialog = createDialog;
+Object.defineProperty(exports, "DialogRoot", {
+  enumerable: true,
+  get: function () {
+    return _DialogRoot.DialogRoot;
+  }
+});
+Object.defineProperty(exports, "DialogTrigger", {
+  enumerable: true,
+  get: function () {
+    return _DialogTrigger.DialogTrigger;
+  }
+});
 Object.defineProperty(exports, "useDialog", {
   enumerable: true,
   get: function () {
     return _context.useDialog;
   }
 });
-var _createDialogRoot = require("./createDialogRoot");
-var _createDialogTrigger = require("./createDialogTrigger");
-var _createDialogContent = require("./createDialogContent");
-var _createDialogHeader = require("./createDialogHeader");
-var _createDialogTitle = require("./createDialogTitle");
-var _createDialogDescription = require("./createDialogDescription");
-var _createDialogBody = require("./createDialogBody");
-var _createDialogFooter = require("./createDialogFooter");
-var _createDialogClose = require("./createDialogClose");
 var _context = require("./context");
-function createDialog(BaseComponents) {
-  const Root = (0, _createDialogRoot.createDialogRoot)(BaseComponents.Root);
-  const Trigger = (0, _createDialogTrigger.createDialogTrigger)(BaseComponents.Trigger);
-  const Content = (0, _createDialogContent.createDialogContent)(BaseComponents.Content, BaseComponents.Overlay);
-  const Header = (0, _createDialogHeader.createDialogHeader)(BaseComponents.Header);
-  const Title = (0, _createDialogTitle.createDialogTitle)(BaseComponents.Title);
-  const Description = (0, _createDialogDescription.createDialogDescription)(BaseComponents.Description);
-  const Body = (0, _createDialogBody.createDialogBody)(BaseComponents.Body);
-  const Footer = (0, _createDialogFooter.createDialogFooter)(BaseComponents.Footer);
-  const Close = (0, _createDialogClose.createDialogClose)(BaseComponents.Close);
-  Root.displayName = 'DialogPrimitive.Root';
-  Trigger.displayName = 'DialogPrimitive.Trigger';
-  Content.displayName = 'DialogPrimitive.Content';
-  Header.displayName = 'DialogPrimitive.Header';
-  Title.displayName = 'DialogPrimitive.Title';
-  Description.displayName = 'DialogPrimitive.Description';
-  Body.displayName = 'DialogPrimitive.Body';
-  Footer.displayName = 'DialogPrimitive.Footer';
-  Close.displayName = 'DialogPrimitive.Close';
-  return Object.assign(Root, {
-    Root,
-    Trigger,
-    Content,
-    Header,
-    Title,
-    Description,
-    Body,
-    Footer,
-    Close
-  });
-}
+var _DialogRoot = require("./DialogRoot");
+var _DialogTrigger = require("./DialogTrigger");
+var _DialogPortal = require("./DialogPortal");
+var _DialogOverlay = require("./DialogOverlay");
+var _DialogContent = require("./DialogContent");
+var _DialogPopup = require("./DialogPopup");
+var _DialogClose = require("./DialogClose");
 //# sourceMappingURL=index.js.map

package/lib/commonjs/dialog/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_createDialogRoot","require","_createDialogTrigger","_createDialogContent","_createDialogHeader","_createDialogTitle","_createDialogDescription","_createDialogBody","_createDialogFooter","_createDialogClose","_context","createDialog","BaseComponents","Root","createDialogRoot","Trigger","createDialogTrigger","Content","createDialogContent","Overlay","Header","createDialogHeader","Title","createDialogTitle","Description","createDialogDescription","Body","createDialogBody","Footer","createDialogFooter","Close","createDialogClose","displayName","Object","assign"],"sourceRoot":"../../../src","sources":["dialog/index.tsx"],"mappings":";;;;;;;;;;;;;;;;;;AACA,IAAAA,iBAAA,GAAAC,OAAA;AACA,IAAAC,oBAAA,GAAAD,OAAA;AACA,IAAAE,oBAAA,GAAAF,OAAA;AACA,IAAAG,mBAAA,GAAAH,OAAA;AACA,IAAAI,kBAAA,GAAAJ,OAAA;AACA,IAAAK,wBAAA,GAAAL,OAAA;AACA,IAAAM,iBAAA,GAAAN,OAAA;AACA,IAAAO,mBAAA,GAAAP,OAAA;AACA,IAAAQ,kBAAA,GAAAR,OAAA;AACA,IAAAS,QAAA,GAAAT,OAAA;AAkBO,SAASU,YAAYA,CAW1BC,cAWD,EAAE;EACD,MAAMC,IAAI,GAAG,IAAAC,kCAAgB,EAACF,cAAc,CAACC,IAAI,CAAC;EAClD,MAAME,OAAO,GAAG,IAAAC,wCAAmB,EAACJ,cAAc,CAACG,OAAO,CAAC;EAC3D,MAAME,OAAO,GAAG,IAAAC,wCAAmB,EAACN,cAAc,CAACK,OAAO,EAAEL,cAAc,CAACO,OAAO,CAAC;EACnF,MAAMC,MAAM,GAAG,IAAAC,sCAAkB,EAACT,cAAc,CAACQ,MAAM,CAAC;EACxD,MAAME,KAAK,GAAG,IAAAC,oCAAiB,EAACX,cAAc,CAACU,KAAK,CAAC;EACrD,MAAME,WAAW,GAAG,IAAAC,gDAAuB,EAACb,cAAc,CAACY,WAAW,CAAC;EACvE,MAAME,IAAI,GAAG,IAAAC,kCAAgB,EAACf,cAAc,CAACc,IAAI,CAAC;EAClD,MAAME,MAAM,GAAG,IAAAC,sCAAkB,EAACjB,cAAc,CAACgB,MAAM,CAAC;EACxD,MAAME,KAAK,GAAG,IAAAC,oCAAiB,EAACnB,cAAc,CAACkB,KAAK,CAAC;EAErDjB,IAAI,CAACmB,WAAW,GAAG,sBAAsB;EACzCjB,OAAO,CAACiB,WAAW,GAAG,yBAAyB;EAC/Cf,OAAO,CAACe,WAAW,GAAG,yBAAyB;EAC/CZ,MAAM,CAACY,WAAW,GAAG,wBAAwB;EAC7CV,KAAK,CAACU,WAAW,GAAG,uBAAuB;EAC3CR,WAAW,CAACQ,WAAW,GAAG,6BAA6B;EACvDN,IAAI,CAACM,WAAW,GAAG,sBAAsB;EACzCJ,MAAM,CAACI,WAAW,GAAG,wBAAwB;EAC7CF,KAAK,CAACE,WAAW,GAAG,uBAAuB;EAE3C,OAAOC,MAAM,CAACC,MAAM,CAACrB,IAAI,EAAE;IACzBA,IAAI;IACJE,OAAO;IACPE,OAAO;IACPG,MAAM;IACNE,KAAK;IACLE,WAAW;IACXE,IAAI;IACJE,MAAM;IACNE;EACF,CAAC,CAAC;AAWJ","ignoreList":[]}
+{"version":3,"names":["_context","require","_DialogRoot","_DialogTrigger","_DialogPortal","_DialogOverlay","_DialogContent","_DialogPopup","_DialogClose"],"sourceRoot":"../../../src","sources":["dialog/index.tsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AACA,IAAAE,cAAA,GAAAF,OAAA;AACA,IAAAG,aAAA,GAAAH,OAAA;AACA,IAAAI,cAAA,GAAAJ,OAAA;AACA,IAAAK,cAAA,GAAAL,OAAA;AACA,IAAAM,YAAA,GAAAN,OAAA;AACA,IAAAO,YAAA,GAAAP,OAAA","ignoreList":[]}

package/lib/commonjs/field/FieldLabel.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FieldLabel = void 0;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _utils = require("@cdx-ui/utils");
+var _slot = require("../slot");
+var _dataAttributes = require("../utils/dataAttributes");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Native: `Text` label row — tap focuses the field input via form context
+ * (parity with `<label htmlFor>` on web).
+ */
+const FieldLabel = exports.FieldLabel = /*#__PURE__*/(0, _react.forwardRef)(({
+  asChild,
+  children,
+  htmlFor: _omitHtmlFor,
+  requiredIndicator,
+  onPress,
+  ...props
+}, ref) => {
+  void _omitHtmlFor;
+  const {
+    labelId,
+    isInvalid,
+    isRequired,
+    isDisabled,
+    focusInput
+  } = (0, _utils.useFormControlContext)();
+  const Comp = asChild ? _slot.Slot : _reactNative.Text;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Comp, {
+    ref: ref,
+    id: labelId,
+    ...props,
+    disabled: Boolean(isDisabled),
+    onPress: (0, _utils.composeEventHandlers)(onPress, () => focusInput?.()),
+    ...(0, _dataAttributes.mergeDataAttributes)(props, (0, _dataAttributes.dataAttributes)({
+      invalid: isInvalid,
+      required: isRequired
+    })),
+    children: [children, isRequired ? requiredIndicator : null]
+  });
+});
+FieldLabel.displayName = 'FieldLabel';
+//# sourceMappingURL=FieldLabel.js.map

package/lib/commonjs/field/FieldLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","_reactNative","_utils","_slot","_dataAttributes","_jsxRuntime","FieldLabel","exports","forwardRef","asChild","children","htmlFor","_omitHtmlFor","requiredIndicator","onPress","props","ref","labelId","isInvalid","isRequired","isDisabled","focusInput","useFormControlContext","Comp","Slot","Text","jsxs","id","disabled","Boolean","composeEventHandlers","mergeDataAttributes","dataAttributes","invalid","required","displayName"],"sourceRoot":"../../../src","sources":["field/FieldLabel.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,KAAA,GAAAH,OAAA;AACA,IAAAI,eAAA,GAAAJ,OAAA;AAA8E,IAAAK,WAAA,GAAAL,OAAA;AAQ9E;AACA;AACA;AACA;AACO,MAAMM,UAAU,GAAAC,OAAA,CAAAD,UAAA,gBAAG,IAAAE,iBAAU,EAClC,CAAC;EAAEC,OAAO;EAAEC,QAAQ;EAAEC,OAAO,EAAEC,YAAY;EAAEC,iBAAiB;EAAEC,OAAO;EAAE,GAAGC;AAAM,CAAC,EAAEC,GAAG,KAAK;EAC3F,KAAKJ,YAAY;EAEjB,MAAM;IAAEK,OAAO;IAAEC,SAAS;IAAEC,UAAU;IAAEC,UAAU;IAAEC;EAAW,CAAC,GAAG,IAAAC,4BAAqB,EAAC,CAAC;EAC1F,MAAMC,IAAI,GAAGd,OAAO,GAAGe,UAAI,GAAGC,iBAAI;EAElC,oBACE,IAAApB,WAAA,CAAAqB,IAAA,EAACH,IAAI;IACHP,GAAG,EAAEA,GAAI;IACTW,EAAE,EAAEV,OAAQ;IAAA,GACRF,KAAK;IACTa,QAAQ,EAAEC,OAAO,CAACT,UAAU,CAAE;IAC9BN,OAAO,EAAE,IAAAgB,2BAAoB,EAAChB,OAAO,EAAE,MAAMO,UAAU,GAAG,CAAC,CAAE;IAAA,GACzD,IAAAU,mCAAmB,EACrBhB,KAAK,EACL,IAAAiB,8BAAc,EAAC;MAAEC,OAAO,EAAEf,SAAS;MAAEgB,QAAQ,EAAEf;IAAW,CAAC,CAC7D,CAAC;IAAAT,QAAA,GAEAA,QAAQ,EACRS,UAAU,GAAGN,iBAAiB,GAAG,IAAI;EAAA,CAClC,CAAC;AAEX,CACF,CAAC;AAEDP,UAAU,CAAC6B,WAAW,GAAG,YAAY","ignoreList":[]}

package/lib/commonjs/field/FieldLabel.web.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FieldLabel = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _utils = require("@cdx-ui/utils");
+var _slot = require("../slot");
+var _domDataAttributes = require("../utils/domDataAttributes");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * Real `<label>` so clicking the label focuses the associated control
+ * (`htmlFor` → input `id`). The htmlFor default matches `useFormControl`:
+ * `props.id ?? \`${field.id}-input\``.
+ */
+const FieldLabel = exports.FieldLabel = /*#__PURE__*/(0, _react.forwardRef)(({
+  asChild,
+  children,
+  htmlFor: htmlForProp,
+  requiredIndicator,
+  dataSet,
+  ...rest
+}, ref) => {
+  const {
+    id: fieldId,
+    labelId,
+    isInvalid,
+    isRequired
+  } = (0, _utils.useFormControlContext)();
+  const htmlFor = htmlForProp ?? (fieldId ? `${fieldId}-input` : undefined);
+  const mergedDataAttrs = (0, _domDataAttributes.mergeDomDataAttributes)((0, _domDataAttributes.domDataAttributes)(dataSet ?? {}), (0, _domDataAttributes.domDataAttributes)({
+    invalid: isInvalid,
+    required: isRequired
+  }));
+  const labelContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [children, isRequired ? requiredIndicator : null]
+  });
+  if (asChild) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_slot.Slot, {
+      ref: ref,
+      id: labelId,
+      htmlFor: htmlFor,
+      ...rest,
+      ...mergedDataAttrs,
+      children: labelContent
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+    ref: ref,
+    id: labelId,
+    htmlFor: htmlFor,
+    ...rest,
+    ...mergedDataAttrs,
+    children: labelContent
+  });
+});
+FieldLabel.displayName = 'FieldLabel';
+//# sourceMappingURL=FieldLabel.web.js.map

package/lib/commonjs/field/FieldLabel.web.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_utils","_slot","_domDataAttributes","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","FieldLabel","exports","forwardRef","asChild","children","htmlFor","htmlForProp","requiredIndicator","dataSet","rest","ref","id","fieldId","labelId","isInvalid","isRequired","useFormControlContext","undefined","mergedDataAttrs","mergeDomDataAttributes","domDataAttributes","invalid","required","labelContent","jsxs","Fragment","jsx","Slot","displayName"],"sourceRoot":"../../../src","sources":["field/FieldLabel.web.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/field/FieldRoot.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FieldRoot = void 0;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _utils = require("@cdx-ui/utils");
+var _slot = require("../slot");
+var _dataAttributes = require("../utils/dataAttributes");
+var _jsxRuntime = require("react/jsx-runtime");
+const FieldRoot = exports.FieldRoot = /*#__PURE__*/(0, _react.forwardRef)(({
+  asChild,
+  children,
+  ...props
+}, ref) => {
+  const {
+    htmlProps,
+    ...context
+  } = (0, _utils.useFormControlRoot)(props);
+  const Comp = asChild ? _slot.Slot : _reactNative.View;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_utils.FormControlContext.Provider, {
+    value: context,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, {
+      ref: ref,
+      ...htmlProps,
+      ...(0, _dataAttributes.mergeDataAttributes)(htmlProps, (0, _dataAttributes.dataAttributes)({
+        disabled: context.isDisabled,
+        invalid: context.isInvalid,
+        required: context.isRequired
+      })),
+      children: children
+    })
+  });
+});
+FieldRoot.displayName = 'FieldRoot';
+//# sourceMappingURL=FieldRoot.js.map