@cdx-ui/primitives 0.0.1-beta.65 → 0.0.1-beta.67

package/lib/commonjs/tile/TileRoot.js

@@ -0,0 +1,129 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TileRoot = void 0;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _utils = require("@cdx-ui/utils");
+var _focus = require("@react-native-aria/focus");
+var _interactions = require("@react-native-aria/interactions");
+var _slot = require("../slot");
+var _dataAttributes = require("../utils/dataAttributes");
+var _context = require("./context");
+var _jsxRuntime = require("react/jsx-runtime");
+const rowStyle = {
+  flexDirection: 'row',
+  alignSelf: 'stretch',
+  alignItems: 'center'
+};
+const TileRoot = exports.TileRoot = /*#__PURE__*/(0, _react.forwardRef)(({
+  asChild = false,
+  value,
+  disabled: disabledProp = false,
+  isSelected: controlledSelected,
+  defaultSelected,
+  onSelectedChange,
+  children,
+  onPress,
+  onFocus,
+  onBlur,
+  style,
+  ...rest
+}, ref) => {
+  const group = (0, _context.useOptionalTileGroupContext)();
+  const [standaloneSelected = false, setStandaloneSelected] = (0, _utils.useControllableState)({
+    prop: controlledSelected,
+    defaultProp: defaultSelected ?? false,
+    onChange: next => {
+      onSelectedChange?.(next);
+    }
+  });
+  const isSelected = group ? group.isSelected(value) : standaloneSelected;
+  const disabledByGroup = group ? group.isTileDisabledByGroup(value) : false;
+  const isDisabled = disabledByGroup || disabledProp;
+  const cannotToggle = isDisabled;
+  const {
+    focusProps,
+    isFocused
+  } = (0, _focus.useFocus)();
+  const {
+    isFocusVisible,
+    focusProps: focusRingProps
+  } = (0, _focus.useFocusRing)();
+  const {
+    pressProps,
+    isPressed
+  } = (0, _interactions.usePress)({
+    isDisabled: cannotToggle
+  });
+  const {
+    hoverProps,
+    isHovered
+  } = (0, _interactions.useHover)();
+
+  // Standalone tiles use checkbox semantics (independent on/off toggle).
+  const selectionType = group ? group.type : 'multiple';
+  const accessibilityState = (0, _react.useMemo)(() => ({
+    disabled: isDisabled,
+    ...(selectionType === 'single' ? {
+      selected: isSelected
+    } : {
+      checked: isSelected
+    })
+  }), [isDisabled, isSelected, selectionType]);
+  const tileContext = (0, _react.useMemo)(() => ({
+    value,
+    isSelected,
+    isDisabled,
+    selectionType
+  }), [value, isSelected, isDisabled, selectionType]);
+  const passthrough = rest;
+  const composedOnPress = (0, _utils.composeEventHandlers)(onPress, () => {
+    if (cannotToggle) {
+      return;
+    }
+    if (group) {
+      group.toggleValue(value);
+    } else {
+      setStandaloneSelected(!standaloneSelected);
+    }
+  });
+  const role = selectionType === 'single' ? 'radio' : 'checkbox';
+  const Comp = asChild ? _slot.Slot : _reactNative.Pressable;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.TileProvider, {
+    value: tileContext,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, {
+      ref: ref,
+      accessibilityRole: role,
+      role: role,
+      accessibilityState: accessibilityState,
+      "aria-checked": isSelected,
+      ...(isDisabled ? {
+        'aria-disabled': true
+      } : {}),
+      disabled: isDisabled,
+      ...rest,
+      ...(0, _dataAttributes.mergeDataAttributes)(rest, (0, _dataAttributes.dataAttributes)({
+        state: isSelected ? 'selected' : 'unselected',
+        disabled: isDisabled,
+        active: isPressed,
+        hover: isHovered,
+        focus: isFocused,
+        focusVisible: isFocusVisible
+      })),
+      style: [rowStyle, style],
+      onPress: isDisabled ? undefined : composedOnPress,
+      onPressIn: (0, _utils.composeEventHandlers)(passthrough.onPressIn, pressProps.onPressIn),
+      onPressOut: (0, _utils.composeEventHandlers)(passthrough.onPressOut, pressProps.onPressOut),
+      onHoverIn: (0, _utils.composeEventHandlers)(passthrough.onHoverIn, hoverProps.onHoverIn),
+      onHoverOut: (0, _utils.composeEventHandlers)(passthrough.onHoverOut, hoverProps.onHoverOut),
+      onFocus: (0, _utils.composeEventHandlers)((0, _utils.composeEventHandlers)(onFocus, focusProps.onFocus), focusRingProps.onFocus),
+      onBlur: (0, _utils.composeEventHandlers)((0, _utils.composeEventHandlers)(onBlur, focusProps.onBlur), focusRingProps.onBlur),
+      children: children
+    })
+  });
+});
+TileRoot.displayName = 'TileRoot';
+//# sourceMappingURL=TileRoot.js.map

package/lib/commonjs/tile/TileRoot.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","_reactNative","_utils","_focus","_interactions","_slot","_dataAttributes","_context","_jsxRuntime","rowStyle","flexDirection","alignSelf","alignItems","TileRoot","exports","forwardRef","asChild","value","disabled","disabledProp","isSelected","controlledSelected","defaultSelected","onSelectedChange","children","onPress","onFocus","onBlur","style","rest","ref","group","useOptionalTileGroupContext","standaloneSelected","setStandaloneSelected","useControllableState","prop","defaultProp","onChange","next","disabledByGroup","isTileDisabledByGroup","isDisabled","cannotToggle","focusProps","isFocused","useFocus","isFocusVisible","focusRingProps","useFocusRing","pressProps","isPressed","usePress","hoverProps","isHovered","useHover","selectionType","type","accessibilityState","useMemo","selected","checked","tileContext","passthrough","composedOnPress","composeEventHandlers","toggleValue","role","Comp","Slot","Pressable","jsx","TileProvider","accessibilityRole","mergeDataAttributes","dataAttributes","state","active","hover","focus","focusVisible","undefined","onPressIn","onPressOut","onHoverIn","onHoverOut","displayName"],"sourceRoot":"../../../src","sources":["tile/TileRoot.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/tile/index.js

@@ -3,53 +3,31 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "TileGroup", {
+  enumerable: true,
+  get: function () {
+    return _TileGroup.TileGroup;
+  }
+});
 Object.defineProperty(exports, "TileProvider", {
   enumerable: true,
   get: function () {
     return _context.TileProvider;
   }
 });
-exports.createTile = createTile;
+Object.defineProperty(exports, "TileRoot", {
+  enumerable: true,
+  get: function () {
+    return _TileRoot.TileRoot;
+  }
+});
 Object.defineProperty(exports, "useTileContext", {
   enumerable: true,
   get: function () {
     return _context.useTileContext;
   }
 });
-var _createTileContent = require("./createTileContent");
-var _createTileDescription = require("./createTileDescription");
-var _createTileGroup = require("./createTileGroup");
-var _createTileIndicator = require("./createTileIndicator");
-var _createTileLeadingSlot = require("./createTileLeadingSlot");
-var _createTileRoot = require("./createTileRoot");
-var _createTileTitle = require("./createTileTitle");
-var _createTileTrailingSlot = require("./createTileTrailingSlot");
 var _context = require("./context");
-function createTile(BaseComponents) {
-  const Tile = (0, _createTileRoot.createTileRoot)(BaseComponents.Pressable);
-  const Group = (0, _createTileGroup.createTileGroup)(BaseComponents.Group);
-  const LeadingSlot = (0, _createTileLeadingSlot.createTileLeadingSlot)(BaseComponents.LeadingSlot);
-  const Content = (0, _createTileContent.createTileContent)(BaseComponents.Content);
-  const Title = (0, _createTileTitle.createTileTitle)(BaseComponents.Title);
-  const Description = (0, _createTileDescription.createTileDescription)(BaseComponents.Description);
-  const Indicator = (0, _createTileIndicator.createTileIndicator)(BaseComponents.Indicator);
-  const TrailingSlot = (0, _createTileTrailingSlot.createTileTrailingSlot)(BaseComponents.TrailingSlot);
-  Tile.displayName = 'TilePrimitive';
-  Group.displayName = 'TilePrimitive.Group';
-  LeadingSlot.displayName = 'TilePrimitive.LeadingSlot';
-  Content.displayName = 'TilePrimitive.Content';
-  Title.displayName = 'TilePrimitive.Title';
-  Description.displayName = 'TilePrimitive.Description';
-  Indicator.displayName = 'TilePrimitive.Indicator';
-  TrailingSlot.displayName = 'TilePrimitive.TrailingSlot';
-  return Object.assign(Tile, {
-    Group,
-    LeadingSlot,
-    Content,
-    Title,
-    Description,
-    Indicator,
-    TrailingSlot
-  });
-}
+var _TileRoot = require("./TileRoot");
+var _TileGroup = require("./TileGroup");
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["_createTileContent","require","_createTileDescription","_createTileGroup","_createTileIndicator","_createTileLeadingSlot","_createTileRoot","_createTileTitle","_createTileTrailingSlot","_context","createTile","BaseComponents","Tile","createTileRoot","Pressable","Group","createTileGroup","LeadingSlot","createTileLeadingSlot","Content","createTileContent","Title","createTileTitle","Description","createTileDescription","Indicator","createTileIndicator","TrailingSlot","createTileTrailingSlot","displayName","Object","assign"],"sourceRoot":"../../../src","sources":["tile/index.ts"],"mappings":";;;;;;;;;;;;;;;;;;AACA,IAAAA,kBAAA,GAAAC,OAAA;AACA,IAAAC,sBAAA,GAAAD,OAAA;AACA,IAAAE,gBAAA,GAAAF,OAAA;AACA,IAAAG,oBAAA,GAAAH,OAAA;AACA,IAAAI,sBAAA,GAAAJ,OAAA;AACA,IAAAK,eAAA,GAAAL,OAAA;AACA,IAAAM,gBAAA,GAAAN,OAAA;AACA,IAAAO,uBAAA,GAAAP,OAAA;AAsBA,IAAAQ,QAAA,GAAAR,OAAA;AAEO,SAASS,UAAUA,CASxBC,cASD,EAAE;EACD,MAAMC,IAAI,GAAG,IAAAC,8BAAc,EAACF,cAAc,CAACG,SAAS,CAAC;EACrD,MAAMC,KAAK,GAAG,IAAAC,gCAAe,EAACL,cAAc,CAACI,KAAK,CAAC;EACnD,MAAME,WAAW,GAAG,IAAAC,4CAAqB,EAACP,cAAc,CAACM,WAAW,CAAC;EACrE,MAAME,OAAO,GAAG,IAAAC,oCAAiB,EAACT,cAAc,CAACQ,OAAO,CAAC;EACzD,MAAME,KAAK,GAAG,IAAAC,gCAAe,EAACX,cAAc,CAACU,KAAK,CAAC;EACnD,MAAME,WAAW,GAAG,IAAAC,4CAAqB,EAACb,cAAc,CAACY,WAAW,CAAC;EACrE,MAAME,SAAS,GAAG,IAAAC,wCAAmB,EAACf,cAAc,CAACc,SAAS,CAAC;EAC/D,MAAME,YAAY,GAAG,IAAAC,8CAAsB,EAACjB,cAAc,CAACgB,YAAY,CAAC;EAExEf,IAAI,CAACiB,WAAW,GAAG,eAAe;EAClCd,KAAK,CAACc,WAAW,GAAG,qBAAqB;EACzCZ,WAAW,CAACY,WAAW,GAAG,2BAA2B;EACrDV,OAAO,CAACU,WAAW,GAAG,uBAAuB;EAC7CR,KAAK,CAACQ,WAAW,GAAG,qBAAqB;EACzCN,WAAW,CAACM,WAAW,GAAG,2BAA2B;EACrDJ,SAAS,CAACI,WAAW,GAAG,yBAAyB;EACjDF,YAAY,CAACE,WAAW,GAAG,4BAA4B;EAEvD,OAAOC,MAAM,CAACC,MAAM,CAACnB,IAAI,EAAE;IACzBG,KAAK;IACLE,WAAW;IACXE,OAAO;IACPE,KAAK;IACLE,WAAW;IACXE,SAAS;IACTE;EACF,CAAC,CAAC;AAUJ","ignoreList":[]}
+{"version":3,"names":["_context","require","_TileRoot","_TileGroup"],"sourceRoot":"../../../src","sources":["tile/index.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,SAAA,GAAAD,OAAA;AACA,IAAAE,UAAA,GAAAF,OAAA","ignoreList":[]}

package/lib/commonjs/utils/dataAttributes.js

@@ -9,5 +9,11 @@ Object.defineProperty(exports, "dataAttributes", {
     return _domDataAttributes.domDataAttributes;
   }
 });
+Object.defineProperty(exports, "mergeDataAttributes", {
+  enumerable: true,
+  get: function () {
+    return _domDataAttributes.mergeDomDataAttributes;
+  }
+});
 var _domDataAttributes = require("./domDataAttributes");
 //# sourceMappingURL=dataAttributes.js.map

package/lib/commonjs/utils/dataAttributes.js.map

@@ -1 +1 @@
-{"version":3,"names":["_domDataAttributes","require"],"sourceRoot":"../../../src","sources":["utils/dataAttributes.ts"],"mappings":";;;;;;;;;;;AAMA,IAAAA,kBAAA,GAAAC,OAAA","ignoreList":[]}
+{"version":3,"names":["_domDataAttributes","require"],"sourceRoot":"../../../src","sources":["utils/dataAttributes.ts"],"mappings":";;;;;;;;;;;;;;;;;AAMA,IAAAA,kBAAA,GAAAC,OAAA","ignoreList":[]}

package/lib/commonjs/utils/dataAttributes.web.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.dataAttributes = dataAttributes;
+exports.mergeDataAttributes = mergeDataAttributes;
 /**
  * Produces platform-specific props for data attributes.
  *
@@ -25,4 +26,28 @@ function dataAttributes(attrs) {
     dataSet
   };
 }
+
+/**
+ * Merges multiple sources of data attributes into a single `{ dataSet }` prop
+ * on web. Each source may be a `dataAttributes()` output (`{ dataSet: {...} }`)
+ * or any props object that contains a `dataSet` key — other keys are ignored.
+ * Later sources override earlier sources on inner-key conflicts.
+ *
+ * Required when an element receives data attributes from more than one source:
+ * a plain prop spread merges by replacing the `dataSet` key entirely, so e.g.
+ * `{...dataAttributes({ slot })} {...dataAttributes({ hover })}` keeps only the
+ * second `dataSet`. Use `mergeDataAttributes(...)` to combine them safely.
+ */
+function mergeDataAttributes(...sources) {
+  const dataSet = {};
+  for (const source of sources) {
+    if (!source) continue;
+    const sourceDataSet = source.dataSet;
+    if (!sourceDataSet) continue;
+    Object.assign(dataSet, sourceDataSet);
+  }
+  return {
+    dataSet
+  };
+}
 //# sourceMappingURL=dataAttributes.web.js.map

package/lib/commonjs/utils/dataAttributes.web.js.map

@@ -1 +1 @@
-{"version":3,"names":["dataAttributes","attrs","dataSet","key","value"],"sourceRoot":"../../../src","sources":["utils/dataAttributes.web.ts"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAIO,SAASA,cAAcA,CAACC,KAAyC,EAEtE;EACA,MAAMC,OAAyC,GAAG,CAAC,CAAC;EACpD,KAAK,MAAMC,GAAG,IAAIF,KAAK,EAAE;IACvB,MAAMG,KAAK,GAAGH,KAAK,CAACE,GAAG,CAAC;IAExBD,OAAO,CAACC,GAAG,CAAC,GAAGC,KAAK,IAAI,KAAK;EAC/B;EACA,OAAO;IAAEF;EAAQ,CAAC;AACpB","ignoreList":[]}
+{"version":3,"names":["dataAttributes","attrs","dataSet","key","value","mergeDataAttributes","sources","source","sourceDataSet","Object","assign"],"sourceRoot":"../../../src","sources":["utils/dataAttributes.web.ts"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAIO,SAASA,cAAcA,CAACC,KAAyC,EAEtE;EACA,MAAMC,OAAyC,GAAG,CAAC,CAAC;EACpD,KAAK,MAAMC,GAAG,IAAIF,KAAK,EAAE;IACvB,MAAMG,KAAK,GAAGH,KAAK,CAACE,GAAG,CAAC;IAExBD,OAAO,CAACC,GAAG,CAAC,GAAGC,KAAK,IAAI,KAAK;EAC/B;EACA,OAAO;IAAEF;EAAQ,CAAC;AACpB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASG,mBAAmBA,CACjC,GAAGC,OAAwF,EACrD;EACtC,MAAMJ,OAAgC,GAAG,CAAC,CAAC;EAC3C,KAAK,MAAMK,MAAM,IAAID,OAAO,EAAE;IAC5B,IAAI,CAACC,MAAM,EAAE;IACb,MAAMC,aAAa,GAAID,MAAM,CAA2CL,OAAO;IAC/E,IAAI,CAACM,aAAa,EAAE;IACpBC,MAAM,CAACC,MAAM,CAACR,OAAO,EAAEM,aAAa,CAAC;EACvC;EACA,OAAO;IAAEN;EAAQ,CAAC;AACpB","ignoreList":[]}

package/lib/commonjs/utils/domDataAttributes.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.domDataAttributes = domDataAttributes;
+exports.mergeDomDataAttributes = mergeDomDataAttributes;
 /**
  * Produces `data-*` DOM attribute props for use on raw HTML elements (e.g. `<button>`).
  *
@@ -31,4 +32,33 @@ function domDataAttributes(attrs) {
   }
   return result;
 }
+
+/**
+ * Merges multiple sources of DOM data attributes into a single flat object of
+ * `data-*` keys. Each source can be a `domDataAttributes()` output or any props
+ * object — non-`data-*` keys are ignored. Later sources override earlier sources
+ * on key conflicts.
+ *
+ * Use this when an element receives `data-*` attributes from more than one
+ * source (e.g. a styled layer's `data-slot` and a primitive's interaction-state
+ * `data-hover`/`data-focus` etc.) and a plain prop spread would otherwise be
+ * fine on native but lose attributes on web (where `dataAttributes()` returns
+ * `{ dataSet }` — see the `.web.ts` sibling for the web merge).
+ */
+function mergeDomDataAttributes(...sources) {
+  const result = {};
+  for (const source of sources) {
+    if (!source) continue;
+    for (const key in source) {
+      if (!key.startsWith('data-')) continue;
+      const value = source[key];
+      if (typeof value === 'boolean') {
+        result[key] = String(value);
+      } else if (typeof value === 'string') {
+        result[key] = value;
+      }
+    }
+  }
+  return result;
+}
 //# sourceMappingURL=domDataAttributes.js.map

package/lib/commonjs/utils/domDataAttributes.js.map

@@ -1 +1 @@
-{"version":3,"names":["camelToKebab","str","replaceAll","ch","toLowerCase","domDataAttributes","attrs","result","key","value","undefined","String"],"sourceRoot":"../../../src","sources":["utils/domDataAttributes.ts"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAIA,SAASA,YAAYA,CAACC,GAAW,EAAU;EACzC,OAAOA,GAAG,CAACC,UAAU,CAAC,QAAQ,EAAGC,EAAE,IAAK,IAAIA,EAAE,CAACC,WAAW,CAAC,CAAC,EAAE,CAAC;AACjE;AAEO,SAASC,iBAAiBA,CAC/BC,KAA4C,EACpB;EACxB,MAAMC,MAA8B,GAAG,CAAC,CAAC;EACzC,KAAK,MAAMC,GAAG,IAAIF,KAAK,EAAE;IACvB,MAAMG,KAAK,GAAGH,KAAK,CAACE,GAAG,CAAC;IACxB,IAAIC,KAAK,KAAKC,SAAS,EAAE;MACvB;IACF;IACAH,MAAM,CAAC,QAAQP,YAAY,CAACQ,GAAG,CAAC,EAAE,CAAC,GAAG,OAAOC,KAAK,KAAK,SAAS,GAAGE,MAAM,CAACF,KAAK,CAAC,GAAGA,KAAK;EAC1F;EACA,OAAOF,MAAM;AACf","ignoreList":[]}
+{"version":3,"names":["camelToKebab","str","replaceAll","ch","toLowerCase","domDataAttributes","attrs","result","key","value","undefined","String","mergeDomDataAttributes","sources","source","startsWith"],"sourceRoot":"../../../src","sources":["utils/domDataAttributes.ts"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAIA,SAASA,YAAYA,CAACC,GAAW,EAAU;EACzC,OAAOA,GAAG,CAACC,UAAU,CAAC,QAAQ,EAAGC,EAAE,IAAK,IAAIA,EAAE,CAACC,WAAW,CAAC,CAAC,EAAE,CAAC;AACjE;AAEO,SAASC,iBAAiBA,CAC/BC,KAA4C,EACpB;EACxB,MAAMC,MAA8B,GAAG,CAAC,CAAC;EACzC,KAAK,MAAMC,GAAG,IAAIF,KAAK,EAAE;IACvB,MAAMG,KAAK,GAAGH,KAAK,CAACE,GAAG,CAAC;IACxB,IAAIC,KAAK,KAAKC,SAAS,EAAE;MACvB;IACF;IACAH,MAAM,CAAC,QAAQP,YAAY,CAACQ,GAAG,CAAC,EAAE,CAAC,GAAG,OAAOC,KAAK,KAAK,SAAS,GAAGE,MAAM,CAACF,KAAK,CAAC,GAAGA,KAAK;EAC1F;EACA,OAAOF,MAAM;AACf;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASK,sBAAsBA,CACpC,GAAGC,OAAgD,EAC3B;EACxB,MAAMN,MAA8B,GAAG,CAAC,CAAC;EACzC,KAAK,MAAMO,MAAM,IAAID,OAAO,EAAE;IAC5B,IAAI,CAACC,MAAM,EAAE;IACb,KAAK,MAAMN,GAAG,IAAIM,MAAM,EAAE;MACxB,IAAI,CAACN,GAAG,CAACO,UAAU,CAAC,OAAO,CAAC,EAAE;MAC9B,MAAMN,KAAK,GAAGK,MAAM,CAACN,GAAG,CAAC;MACzB,IAAI,OAAOC,KAAK,KAAK,SAAS,EAAE;QAC9BF,MAAM,CAACC,GAAG,CAAC,GAAGG,MAAM,CAACF,KAAK,CAAC;MAC7B,CAAC,MAAM,IAAI,OAAOA,KAAK,KAAK,QAAQ,EAAE;QACpCF,MAAM,CAACC,GAAG,CAAC,GAAGC,KAAK;MACrB;IACF;EACF;EACA,OAAOF,MAAM;AACf","ignoreList":[]}

package/lib/module/CLAUDE.md

@@ -8,25 +8,77 @@ Primitives in `@cdx-ui/primitives` are unstyled behavioral components that handl
 - `docs/internal/practices/types.md` — `I*Props` convention, extending RN base types
 - `docs/internal/practices/accessibility.md` — ARIA roles, keyboard nav, screen reader support
 - `docs/internal/practices/as-child.md` — `asChild` prop pattern
+- `docs/internal/practices/data-attributes.md` — `data-state` and `data-slot` conventions
+
+## Six standards
+
+Forge UI primitives and their styled counterparts follow six standards. The first three govern primitive-layer authoring; the last three govern the styled layer (see `packages/components/src/components/CLAUDE.md`).
+
+### Standard 1 — Data attributes for interaction states
+
+Root primitives emit `data-*` attributes for the interaction state they own and expose that state via context. Sub-slots **do not** subscribe to context and **do not** emit interaction `data-*` attributes — they opt in only when their own styling or behavior reacts to that state.
+
+- **Root** — emits + provides context. Always.
+- **Sub-slot** — does not subscribe, does not emit. Opt in only when the styled layer (or the slot's own behavior) demonstrably reacts to the state.
+
+Pointlessly emitting on every sub-slot multiplies bridge writes (native) and DOM attribute writes (web) for no consumer benefit. A sub-slot that calls `useButtonContext()` becomes a subscriber — every interaction re-renders it even when nothing visually changes.
+
+`useButtonContext()` stays exported so styled-layer slots and external consumers can opt in when they actually need it.
+
+### Standard 2 — `asChild` support
+
+Every public primitive supports `asChild` via `Slot` (re-exported from `packages/primitives/src/slot`). The runtime cost when `asChild` is `false` is a single boolean check; consumers who opt in pay the merge cost themselves.
+
+```tsx
+const Comp = asChild ? Slot : DefaultElement;
+```
+
+### Standard 3 — When to create a primitive (the primitive-existence test)
+
+Create a primitive **only** when the slot owns behavior. A slot earns a primitive if it has at least one of:
+
+1. **Behavioral state machinery** — interaction hooks (`useFocus`, `useFocusRing`, `useHover`, `usePress`), controlled/uncontrolled state, open/closed/checked/value management.
+2. **Non-host accessibility semantics** — ARIA role/state beyond what the host element provides natively, custom keyboard handling, screen-reader announcements, focus traps.
+3. **Cross-platform host abstraction** — different host element per platform (e.g., a `.web.tsx` / `.native.tsx` split).
+4. **Compound contract ownership** — defines the compound's state surface and is the context provider (i.e., the Root).
+
+A slot does **not** earn a primitive if it only:
+
+- Wraps a host element with `className`/`style`.
+- Reads context for styling (the styled layer reads it directly via `useButtonContext`, `useStyleContext`, etc.).
+- Wants `asChild` (the styled layer uses `Slot` directly — it is re-exported from `@cdx-ui/primitives`).
+
+This eliminates the "factory pass-through" anti-pattern (e.g., a `ButtonIcon` primitive whose body is `<View {...props} ref={ref} />`). Such wrappers add nothing and force every consumer through a useless layer.
+
+## Canonical reference
+
+`packages/primitives/src/button/ButtonRoot.tsx` is the canonical concrete primitive. It demonstrates every Standard 1–3 requirement: concrete `forwardRef` component over `Pressable`, `asChild` via `Slot`, `dataAttributes()` for interaction state, `ButtonProvider` for context, function-as-children, ARIA defaults, and composed event handlers.
+
+`packages/primitives/src/button/` only ships `ButtonRoot` + `useButtonContext` + types. There is intentionally no `ButtonLabel`/`ButtonIcon`/`ButtonSpinner`/`ButtonGroup` primitive — those slots fail the primitive-existence test, so they live in `@cdx-ui/components` only.
+
+The styled-layer glyph inside `packages/components/src/components/IconButton/index.tsx` is the canonical example of a sub-slot that legitimately opts into interaction state. When (and only when) its own styling reacts to hover/focus/press, it reads `useButtonContext()` and emits `data-*` via `dataAttributes()` — the same pattern external consumers use.
 
 ## Pattern summary
 
-Each primitive follows the factory function pattern (see `createButtonRoot.tsx` as the canonical example):
+Each concrete primitive is a `forwardRef` component that hardcodes its default RN base element and supports `asChild` via `Slot`:
 
-1. **Factory function** — `export const createComponentPart = <T,>(BaseComponent: ComponentType<T>) => forwardRef(...)` — accepts a host element type, returns a wrapped component with behavior
+1. **Concrete component** — `export const ComponentRoot = forwardRef<View, Props>(...)` hardcodes `View`/`Pressable`/`Text` as the default; uses `const Comp = asChild ? Slot : View` for the escape hatch
 2. **Interaction hooks** — `useFocus`, `useFocusRing`, `useHover`, `usePress` from `@react-native-aria/*`
 3. **Data attributes** — `dataAttributes({ hover, focus, active, disabled, focusVisible })` emitted on the rendered element for Uniwind `data-[state]` selectors
-4. **Context provider** — interaction state exposed via context so child primitives can react to parent state
-5. **Barrel export** — `index.tsx` re-exports the factory, context, and types
+4. **Context provider** — interaction state exposed via context so sub-slots and external consumers can opt in
+5. **Barrel export** — `index.ts` re-exports the concrete components, context, and types
+6. **`displayName`** — set on every exported component
 
 ## Key rules
 
 - **Unstyled** — no visual styling (no `className`, no color/spacing classes). Only behavioral and a11y concerns.
-- **`I*Props` convention** — public prop types are aliased with `I` prefix (e.g., `IButtonProps`, `ICheckboxProps`), exported from `types.ts`
-- **`Interface*Props` pattern** — the full interface (e.g., `InterfaceButtonProps`, `InterfaceCheckbox`) extends the appropriate RN base type (`PressableProps`, `ViewProps`, etc.) with interaction state booleans (`isHovered`, `isActive`, `isFocused`, `isFocusVisible`, `isDisabled`); re-exported as `I*Props` (e.g., `export type IButtonProps = InterfaceButtonProps`)
-- **`dataAttributes()` helper** — always use the helper from `../utils/dataAttributes` to emit `data-*` props; it handles platform differences (native vs web)
-- **`composeEventHandlers`** from `@cdx-ui/utils` — merge consumer handlers with internal handlers; never silently override
-- **`forwardRef`** on every component — refs forwarded to the underlying host element
-- **ARIA roles** — set `role` with a sensible default (e.g., `role={props?.role || 'button'}`)
-- **Render children as function** — support `children` as `(state: InteractionState) => ReactNode` for state-driven rendering
-- **Consumable independently** of `@cdx-ui/components` — no imports from the styled layer
+- **`asChild` via `Slot`** — import `Slot` from `../slot`; use `const Comp = asChild ? Slot : DefaultElement`.
+- **`I*Props` convention** — public prop types are aliased with `I` prefix (e.g., `IButtonProps`), exported from `types.ts`.
+- **`Interface*Props` pattern** — the full interface (e.g., `InterfaceButtonProps`) extends the appropriate RN base type (`PressableProps`, `ViewProps`, etc.) with interaction state booleans (`isHovered`, `isActive`, `isFocused`, `isFocusVisible`, `isDisabled`); re-exported as `I*Props`.
+- **`dataAttributes()` helper** — always use the helper from `../utils/dataAttributes` to emit `data-*` props; it handles platform differences (native vs web).
+- **`mergeDataAttributes(...sources)` helper** — when a primitive Root receives data attrs through `props` from its styled layer (e.g. `data-slot`) AND emits its own data attrs (e.g. interaction state), combine them via `mergeDataAttributes(props, dataAttributes({...}))`. A plain `{...dataAttributes({...})} {...props}` spread chain wipes out one side on web — `dataAttributes` returns `{ dataSet }`, so back-to-back spreads replace each other. The merge helper preserves both. `ButtonRoot.tsx` shows the canonical pattern.
+- **`composeEventHandlers`** from `@cdx-ui/utils` — merge consumer handlers with internal handlers; never silently override.
+- **`forwardRef`** on every component — refs forwarded to the underlying host element.
+- **ARIA roles** — set `role` with a sensible default (e.g., `role={props?.role || 'button'}`).
+- **Render children as function** — support `children` as `(state: InteractionState) => ReactNode` for state-driven rendering where the Root exposes interaction state.
+- **Consumable independently** of `@cdx-ui/components` — no imports from the styled layer.

package/lib/module/avatar/{createAvatarRoot.js → AvatarRoot.js}

@@ -1,9 +1,12 @@
 "use strict";
 
 import { forwardRef, useMemo, useState } from 'react';
+import { View } from 'react-native';
+import { Slot } from '../slot';
 import { AvatarProvider } from './context';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const createAvatarRoot = BaseAvatar => /*#__PURE__*/forwardRef(({
+export const AvatarRoot = /*#__PURE__*/forwardRef(({
+  asChild,
   children,
   ...props
 }, ref) => {
@@ -15,15 +18,17 @@ export const createAvatarRoot = BaseAvatar => /*#__PURE__*/forwardRef(({
     setImageLoaded,
     setImageError
   }), [imageLoaded, imageError]);
+  const Comp = asChild ? Slot : View;
   return /*#__PURE__*/_jsx(AvatarProvider, {
     value: contextValue,
-    children: /*#__PURE__*/_jsx(BaseAvatar, {
+    children: /*#__PURE__*/_jsx(Comp, {
       ref: ref,
-      role: "img",
+      role: props.role || 'img',
       accessibilityRole: "image",
       ...props,
       children: children
     })
   });
 });
-//# sourceMappingURL=createAvatarRoot.js.map
+AvatarRoot.displayName = 'AvatarRoot';
+//# sourceMappingURL=AvatarRoot.js.map

package/lib/module/avatar/AvatarRoot.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["forwardRef","useMemo","useState","View","Slot","AvatarProvider","jsx","_jsx","AvatarRoot","asChild","children","props","ref","imageLoaded","setImageLoaded","imageError","setImageError","contextValue","Comp","value","role","accessibilityRole","displayName"],"sourceRoot":"../../../src","sources":["avatar/AvatarRoot.tsx"],"mappings":";;AACA,SAASA,UAAU,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AACrD,SAASC,IAAI,QAAwB,cAAc;AACnD,SAASC,IAAI,QAAQ,SAAS;AAC9B,SAASC,cAAc,QAAQ,WAAW;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAO3C,OAAO,MAAMC,UAAU,gBAAGR,UAAU,CAClC,CAAC;EAAES,OAAO;EAAEC,QAAQ;EAAE,GAAGC;AAAM,CAAC,EAAEC,GAAG,KAAK;EACxC,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAGZ,QAAQ,CAAC,KAAK,CAAC;EACrD,MAAM,CAACa,UAAU,EAAEC,aAAa,CAAC,GAAGd,QAAQ,CAAC,KAAK,CAAC;EAEnD,MAAMe,YAAY,GAAGhB,OAAO,CAC1B,OAAO;IAAEY,WAAW;IAAEE,UAAU;IAAED,cAAc;IAAEE;EAAc,CAAC,CAAC,EAClE,CAACH,WAAW,EAAEE,UAAU,CAC1B,CAAC;EAED,MAAMG,IAAI,GAAGT,OAAO,GAAGL,IAAI,GAAGD,IAAI;EAElC,oBACEI,IAAA,CAACF,cAAc;IAACc,KAAK,EAAEF,YAAa;IAAAP,QAAA,eAClCH,IAAA,CAACW,IAAI;MACHN,GAAG,EAAEA,GAAI;MACTQ,IAAI,EAAET,KAAK,CAACS,IAAI,IAAI,KAAM;MAC1BC,iBAAiB,EAAC,OAAO;MAAA,GACpBV,KAAK;MAAAD,QAAA,EAETA;IAAQ,CACL;EAAC,CACO,CAAC;AAErB,CACF,CAAC;AAEDF,UAAU,CAACc,WAAW,GAAG,YAAY","ignoreList":[]}

package/lib/module/avatar/index.js

@@ -1,26 +1,5 @@
 "use strict";
 
-import { createAvatarBadge } from './createAvatarBadge';
-import { createAvatarIcon } from './createAvatarIcon';
-import { createAvatarText } from './createAvatarText';
-import { createAvatarImage } from './createAvatarImage';
-import { createAvatarRoot } from './createAvatarRoot';
-export function createAvatar(BaseComponents) {
-  const Avatar = createAvatarRoot(BaseComponents.Root);
-  const AvatarImage = createAvatarImage(BaseComponents.Image);
-  const Text = createAvatarText(BaseComponents.Text);
-  const AvatarIcon = createAvatarIcon(BaseComponents.Icon);
-  const Badge = createAvatarBadge(BaseComponents.Badge);
-  Avatar.displayName = 'AvatarPrimitive';
-  AvatarImage.displayName = 'AvatarPrimitive.Image';
-  Text.displayName = 'AvatarPrimitive.Text';
-  AvatarIcon.displayName = 'AvatarPrimitive.Icon';
-  Badge.displayName = 'AvatarPrimitive.Badge';
-  return Object.assign(Avatar, {
-    Image: AvatarImage,
-    Text,
-    Icon: AvatarIcon,
-    Badge
-  });
-}
+export { useAvatarContext } from './context';
+export { AvatarRoot } from './AvatarRoot';
 //# sourceMappingURL=index.js.map

package/lib/module/avatar/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["createAvatarBadge","createAvatarIcon","createAvatarText","createAvatarImage","createAvatarRoot","createAvatar","BaseComponents","Avatar","Root","AvatarImage","Image","Text","AvatarIcon","Icon","Badge","displayName","Object","assign"],"sourceRoot":"../../../src","sources":["avatar/index.ts"],"mappings":";;AACA,SAASA,iBAAiB,QAAQ,qBAAqB;AACvD,SAASC,gBAAgB,QAAQ,oBAAoB;AACrD,SAASC,gBAAgB,QAAQ,oBAAoB;AACrD,SAASC,iBAAiB,QAAQ,qBAAqB;AACvD,SAASC,gBAAgB,QAAQ,oBAAoB;AAYrD,OAAO,SAASC,YAAYA,CAAiCC,cAM5D,EAAE;EACD,MAAMC,MAAM,GAAGH,gBAAgB,CAACE,cAAc,CAACE,IAAI,CAAC;EACpD,MAAMC,WAAW,GAAGN,iBAAiB,CAACG,cAAc,CAACI,KAAK,CAAC;EAC3D,MAAMC,IAAI,GAAGT,gBAAgB,CAACI,cAAc,CAACK,IAAI,CAAC;EAClD,MAAMC,UAAU,GAAGX,gBAAgB,CAACK,cAAc,CAACO,IAAI,CAAC;EACxD,MAAMC,KAAK,GAAGd,iBAAiB,CAACM,cAAc,CAACQ,KAAK,CAAC;EAErDP,MAAM,CAACQ,WAAW,GAAG,iBAAiB;EACtCN,WAAW,CAACM,WAAW,GAAG,uBAAuB;EACjDJ,IAAI,CAACI,WAAW,GAAG,sBAAsB;EACzCH,UAAU,CAACG,WAAW,GAAG,sBAAsB;EAC/CD,KAAK,CAACC,WAAW,GAAG,uBAAuB;EAE3C,OAAOC,MAAM,CAACC,MAAM,CAACV,MAAM,EAAE;IAC3BG,KAAK,EAAED,WAAW;IAClBE,IAAI;IACJE,IAAI,EAAED,UAAU;IAChBE;EACF,CAAC,CAAC;AACJ","ignoreList":[]}
+{"version":3,"names":["useAvatarContext","AvatarRoot"],"sourceRoot":"../../../src","sources":["avatar/index.ts"],"mappings":";;AACA,SAASA,gBAAgB,QAAQ,WAAW;AAC5C,SAASC,UAAU,QAA8B,cAAc","ignoreList":[]}

package/lib/module/button/{createButtonRoot.js → ButtonRoot.js}

@@ -1,13 +1,16 @@
 "use strict";
 
 import { forwardRef, useMemo } from 'react';
+import { Pressable } from 'react-native';
 import { composeEventHandlers } from '@cdx-ui/utils';
 import { useFocus, useFocusRing } from '@react-native-aria/focus';
 import { useHover, usePress } from '@react-native-aria/interactions';
-import { dataAttributes } from '../utils/dataAttributes';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
 import { ButtonProvider } from './context';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const createButtonRoot = BaseButton => /*#__PURE__*/forwardRef(({
+export const ButtonRoot = /*#__PURE__*/forwardRef(({
+  asChild,
   children,
   isDisabled,
   isHovered: isHoveredProp,
@@ -43,20 +46,21 @@ export const createButtonRoot = BaseButton => /*#__PURE__*/forwardRef(({
       focusVisible: isFocusVisibleProp || isFocusVisible
     };
   }, [isHovered, isHoveredProp, isFocused, isFocusedProp, isActive, isActiveProp, isDisabled, isFocusVisible, isFocusVisibleProp]);
+  const Comp = asChild ? Slot : Pressable;
   return /*#__PURE__*/_jsx(ButtonProvider, {
     value: contextValue,
-    children: /*#__PURE__*/_jsx(BaseButton, {
+    children: /*#__PURE__*/_jsx(Comp, {
       ref: ref,
       role: props?.role || 'button',
-      ...dataAttributes({
+      disabled: isDisabled,
+      ...props,
+      ...mergeDataAttributes(props, dataAttributes({
         hover: isHoveredProp || isHovered,
         focus: isFocusedProp || isFocused,
         active: isActiveProp || isActive,
         disabled: !!isDisabled,
         focusVisible: isFocusVisibleProp || isFocusVisible
-      }),
-      disabled: isDisabled,
-      ...props,
+      })),
       onPressIn: composeEventHandlers(props?.onPressIn, pressableProps.onPressIn),
       onPressOut: composeEventHandlers(props?.onPressOut, pressableProps.onPressOut),
       onHoverIn: composeEventHandlers(props?.onHoverIn, hoverProps.onHoverIn),
@@ -73,4 +77,5 @@ export const createButtonRoot = BaseButton => /*#__PURE__*/forwardRef(({
     })
   });
 });
-//# sourceMappingURL=createButtonRoot.js.map
+ButtonRoot.displayName = 'ButtonRoot';
+//# sourceMappingURL=ButtonRoot.js.map

package/lib/module/button/ButtonRoot.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["forwardRef","useMemo","Pressable","composeEventHandlers","useFocus","useFocusRing","useHover","usePress","Slot","dataAttributes","mergeDataAttributes","ButtonProvider","jsx","_jsx","ButtonRoot","asChild","children","isDisabled","isHovered","isHoveredProp","isActive","isActiveProp","isFocused","isFocusedProp","isFocusVisible","isFocusVisibleProp","props","ref","focusProps","focusRingProps","pressProps","pressableProps","isPressed","hoverProps","contextValue","hover","focus","active","disabled","focusVisible","Comp","value","role","onPressIn","onPressOut","onHoverIn","onHoverOut","onFocus","onBlur","displayName"],"sourceRoot":"../../../src","sources":["button/ButtonRoot.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/button/index.js

@@ -1,27 +1,5 @@
 "use strict";
 
-import { createButtonGroup } from './createButtonGroup';
-import { createButtonIcon } from './createButtonIcon';
-import { createButtonRoot } from './createButtonRoot';
-import { createButtonSpinner } from './createButtonSpinner';
-import { createButtonText } from './createButtonText';
 export { useButtonContext } from './context';
-export function createButton(BaseComponents) {
-  const Button = createButtonRoot(BaseComponents.Root);
-  const Text = createButtonText(BaseComponents.Text);
-  const Group = createButtonGroup(BaseComponents.Group);
-  const Spinner = createButtonSpinner(BaseComponents.Spinner);
-  const Icon = createButtonIcon(BaseComponents.Icon);
-  Button.displayName = 'ButtonPrimitive';
-  Text.displayName = 'ButtonPrimitive.Text';
-  Group.displayName = 'ButtonPrimitive.Group';
-  Spinner.displayName = 'ButtonPrimitive.Spinner';
-  Icon.displayName = 'ButtonPrimitive.Icon';
-  return Object.assign(Button, {
-    Text,
-    Group,
-    Spinner,
-    Icon
-  });
-}
+export { ButtonRoot } from './ButtonRoot';
 //# sourceMappingURL=index.js.map

package/lib/module/button/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["createButtonGroup","createButtonIcon","createButtonRoot","createButtonSpinner","createButtonText","useButtonContext","createButton","BaseComponents","Button","Root","Text","Group","Spinner","Icon","displayName","Object","assign"],"sourceRoot":"../../../src","sources":["button/index.tsx"],"mappings":";;AACA,SAASA,iBAAiB,QAAQ,qBAAqB;AACvD,SAASC,gBAAgB,QAAQ,oBAAoB;AACrD,SAASC,gBAAgB,QAAQ,oBAAoB;AACrD,SAASC,mBAAmB,QAAQ,uBAAuB;AAC3D,SAASC,gBAAgB,QAAQ,oBAAoB;AAIrD,SAASC,gBAAgB,QAAQ,WAAW;AAE5C,OAAO,SAASC,YAAYA,CAQ1BC,cAMD,EAAE;EACD,MAAMC,MAAM,GAAGN,gBAAgB,CAACK,cAAc,CAACE,IAAI,CAAC;EACpD,MAAMC,IAAI,GAAGN,gBAAgB,CAACG,cAAc,CAACG,IAAI,CAAC;EAClD,MAAMC,KAAK,GAAGX,iBAAiB,CAACO,cAAc,CAACI,KAAK,CAAC;EACrD,MAAMC,OAAO,GAAGT,mBAAmB,CAACI,cAAc,CAACK,OAAO,CAAC;EAC3D,MAAMC,IAAI,GAAGZ,gBAAgB,CAACM,cAAc,CAACM,IAAI,CAAC;EAElDL,MAAM,CAACM,WAAW,GAAG,iBAAiB;EACtCJ,IAAI,CAACI,WAAW,GAAG,sBAAsB;EACzCH,KAAK,CAACG,WAAW,GAAG,uBAAuB;EAC3CF,OAAO,CAACE,WAAW,GAAG,yBAAyB;EAC/CD,IAAI,CAACC,WAAW,GAAG,sBAAsB;EAEzC,OAAOC,MAAM,CAACC,MAAM,CAACR,MAAM,EAAE;IAC3BE,IAAI;IACJC,KAAK;IACLC,OAAO;IACPC;EACF,CAAC,CAAC;AASJ","ignoreList":[]}
+{"version":3,"names":["useButtonContext","ButtonRoot"],"sourceRoot":"../../../src","sources":["button/index.ts"],"mappings":";;AACA,SAASA,gBAAgB,QAAQ,WAAW;AAC5C,SAASC,UAAU,QAA8B,cAAc","ignoreList":[]}