@cdx-ui/primitives 0.1.7 → 0.2.1

package/src/index.ts

@@ -3,6 +3,12 @@ export * from './breadcrumbs';
 export * from './button';
 export * from './chip';
 export * from './checkbox';
+export * from './color';
+export * from './color-area';
+export * from './color-field';
+export * from './color-picker';
+export * from './color-slider';
+export * from './color-swatch-picker';
 export * from './dialog';
 export * from './drawer';
 export * from './field';
@@ -80,4 +86,5 @@ export {
 export { mapViewPropsToDom, type MapViewPropsToDomOptions } from './utils/mapViewPropsToDom';
 export { assignRef } from './utils/assignRef';
 export { createPortalFn } from './utils/createPortal';
+export { useHasTextAncestor } from './utils/textAncestor';
 export { Slot } from './slot';

package/src/react-native-web.d.ts

@@ -0,0 +1,6 @@
+declare module 'react-native-web/dist/exports/Text/TextAncestorContext' {
+  import type { Context } from 'react';
+
+  const TextAncestorContext: Context<boolean>;
+  export default TextAncestorContext;
+}

package/src/slider/useSliderPointer.ts

@@ -97,6 +97,9 @@ export function useWebSliderDrag({
         return;
       }
 
+      cleanupRef.current?.();
+      cleanupRef.current = null;
+
       const trackSize = orientation === 'horizontal' ? layout.width : layout.height;
       const travel = getThumbTravel(trackSize, thumbSize);
       if (travel <= 0) {

package/src/utils/createPortal.web.ts

@@ -1,7 +1,8 @@
-import type React from 'react';
+import { createElement, type ReactNode, type ReactPortal } from 'react';
 import { createPortal } from 'react-dom';
+import { TextAncestorContext } from './textAncestor';
 
-type CreatePortalFn = (children: React.ReactNode, container: Element) => React.ReactPortal;
+type CreatePortalFn = (children: ReactNode, container: Element) => ReactPortal;
 
 /**
  * Web implementation — statically imports `ReactDOM.createPortal`.
@@ -14,5 +15,10 @@ type CreatePortalFn = (children: React.ReactNode, container: Element) => React.R
  * layout-animation path, leaving web overlays (Select, DatePicker) stuck at
  * opacity 0. A static ESM import guarantees `createPortalFn` resolves on web
  * regardless of the bundler's CommonJS interop.
+ *
+ * Portaled content leaves the DOM subtree of any `Text` it was rendered from,
+ * so the text-ancestor context is reset; otherwise a `Text` inside an overlay
+ * opened from a `Text` would skip its own typography and inherit nothing.
  */
-export const createPortalFn: CreatePortalFn = createPortal;
+export const createPortalFn: CreatePortalFn = (children, container) =>
+  createPortal(createElement(TextAncestorContext.Provider, { value: false }, children), container);

package/src/utils/textAncestor.ts

@@ -0,0 +1,19 @@
+import { createContext, useContext, type Context } from 'react';
+import * as ReactNative from 'react-native';
+
+/**
+ * React Native's own text-ancestor context: `Text` provides `true`, and `View`
+ * (including the one inside `Modal`) resets it to `false`.
+ *
+ * It is exported as `unstable_`, so a React Native release that drops it falls
+ * back to a context nothing provides — every `Text` then styles itself as
+ * top-level instead of the module failing to load.
+ */
+export const TextAncestorContext: Context<boolean> =
+  (ReactNative as { unstable_TextAncestorContext?: Context<boolean> })
+    .unstable_TextAncestorContext ?? createContext(false);
+
+/** `true` when the calling component renders inside a host `Text`. */
+export function useHasTextAncestor(): boolean {
+  return useContext(TextAncestorContext);
+}

package/src/utils/textAncestor.web.ts

@@ -0,0 +1,19 @@
+import { useContext, type Context } from 'react';
+import RNWTextAncestorContext from 'react-native-web/dist/exports/Text/TextAncestorContext';
+
+/**
+ * React Native Web's text-ancestor context, which its `Text` provides. RNW does
+ * not export it, so this is a deep import. RNW's ESM and CommonJS builds each
+ * create their own context, so this must stay on the ESM path: it is the build
+ * bundlers resolve `react-native-web` to, and the path `babel-preset-expo`
+ * rewrites `react-native` imports to under Jest.
+ *
+ * Unlike native, RNW's `View` does not reset the context — CSS inherits through
+ * an inline `View` inside `Text`. DOM portals reset it in `createPortal.web.ts`.
+ */
+export const TextAncestorContext: Context<boolean> = RNWTextAncestorContext;
+
+/** `true` when the calling component renders inside a host `Text`. */
+export function useHasTextAncestor(): boolean {
+  return useContext(TextAncestorContext);
+}