@cdx-ui/primitives 0.0.1-beta.16 → 0.0.1-beta.160

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright © 2026 Digital First Holdings LLC
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,8 +1,10 @@
 # @cdx-ui/primitives
 
-Unstyled, accessible behavioral components (headless) for the Candescent Design System.
+![coverage](https://unpkg.com/@cdx-ui/primitives/coverage.svg)
 
-Primitives provide interaction logic, focus management, and accessibility without imposing any visual styling. They serve as the foundation for [`@cdx-ui/components`](../components/).
+Unstyled, accessible behavioral components (headless) for the Forge Design System. Tested through `@cdx-ui/components` — see [Coverage](../../README.md#coverage).
+
+Primitives provide interaction logic, focus management, and accessibility without imposing any visual styling. They serve as the foundation for `@cdx-ui/components`.
 
 ## Installation
 
@@ -14,42 +16,87 @@ pnpm add @cdx-ui/primitives
 
 - `react` ^18.2.0 || ^19.0.0
 - `react-native` >= 0.76.0 _(optional)_
-- `react-native-reanimated` >= 3.0.0
+- `react-native-reanimated` >= 3.0.0 _(optional)_
 - `react-native-web` >= 0.19.0 _(optional)_
 
-## Factory functions
-
-Each `create*` factory accepts a map of base React Native components and returns a compound component with built-in interaction state tracking, accessibility (roles, ARIA props, keyboard handling), and context propagation.
-
-| Factory          | Returns                                                                                                 |
-| ---------------- | ------------------------------------------------------------------------------------------------------- |
-| `createButton`   | `Button` + `.Text` `.Group` `.Spinner` `.Icon`                                                          |
-| `createInput`    | `Input` + `.Slot` `.Field`                                                                              |
-| `createSelect`   | `Select` + `.Trigger` `.Value` `.Icon` `.Content` `.Item` `.ItemLabel`                                  |
-| `createCheckbox` | `Checkbox` + `.Indicator` `.Icon` `.Label` `.Group`                                                     |
-| `createRadio`    | `Radio` + `.Indicator` `.Label` `.Group`                                                                |
-| `createSwitch`   | `Switch`                                                                                                |
-| `createLink`     | `Link`                                                                                                  |
-| `createAvatar`   | `Avatar` + `.Image` `.Text` `.Icon` `.Badge`                                                            |
-| `createDialog`   | `Dialog` + `.Root` `.Trigger` `.Content` `.Header` `.Title` `.Description` `.Body` `.Footer` `.Close`   |
-| `createField`    | `Field` + `.Label` `.Helper` `.HelperText` `.Error` `.ErrorText` `.ErrorIcon`                           |
-| `createForm`     | `Form`                                                                                                  |
-| `createListItem` | `ListItem` + `.LeadingSlot` `.Content` `.Title` `.Description` `.Meta` `.TrailingSlot` `.SectionHeader` |
-| `createOtpInput` | `OtpInput` + `.Cell` `.Field`                                                                           |
-| `createProgress` | `Progress` + `.Indicator`                                                                               |
-| `createTile`     | `Tile` + `.Group` `.LeadingSlot` `.Content` `.Title` `.Description` `.Indicator` `.TrailingSlot`        |
+## Primitives
+
+Concrete behavioral components with built-in interaction state tracking, accessibility (roles, ARIA props, keyboard handling), and context propagation. Each primitive owns behavior that the styled layer (`@cdx-ui/components`) cannot express with host elements alone.
+
+| Export                                                                                                        | Description                                                                                                                                                                                                                                                                                                                                                                                   |
+| ------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `AvatarRoot`                                                                                                  | Concrete root primitive (context provider for image load state; Image/Text/Icon/Badge live in `@cdx-ui/components`)                                                                                                                                                                                                                                                                           |
+| `ButtonRoot`                                                                                                  | Concrete root primitive (no sub-slots — Label/Icon/Spinner/Group live in `@cdx-ui/components`)                                                                                                                                                                                                                                                                                                |
+| `CheckboxRoot`, `CheckboxGroup`                                                                               | Concrete checkbox primitives (Root owns controlled state + ARIA + `.web` split; Group owns group context. Indicator/Icon/Label live in `@cdx-ui/components`)                                                                                                                                                                                                                                  |
+| `ChipRoot`                                                                                                    | Concrete root primitive (View/Pressable union with interaction state + context; Label/Icon/Avatar live in `@cdx-ui/components`)                                                                                                                                                                                                                                                               |
+| `DialogRoot`, `DialogTrigger`, `DialogPortal`, `DialogOverlay`, `DialogContent`, `DialogPopup`, `DialogClose` | Concrete dialog primitives (Root owns open state + context; Trigger/Close use `Slot` for `asChild`; Portal mounts children into the shared `PortalHost`; Overlay is the dismiss backdrop; Content owns FocusScope + ARIA + Escape/back-button dismissal; `DialogPopup` is the legacy fused panel, kept for back-compat. Header/Title/Description/Content/Footer live in `@cdx-ui/components`) |
+| `FieldRoot`, `FieldLabel`                                                                                     | Concrete field primitives (Root provides `FormControlContext`; Label is platform-split: `Text` + focus-bridge on native, `<label htmlFor>` on web; Helper/Error/ErrorIcon live in `@cdx-ui/components`)                                                                                                                                                                                       |
+| `FormRoot`                                                                                                    | Concrete form primitive (platform-split: `<form>` on web, `View` on native)                                                                                                                                                                                                                                                                                                                   |
+| `InputRoot`, `InputField`                                                                                     | Concrete input primitives (Root owns input context; Field is platform-split: `.tsx`/`.web.tsx`/`.android.tsx`. Slot lives in `@cdx-ui/components`)                                                                                                                                                                                                                                            |
+| `LinkRoot`                                                                                                    | Concrete link primitive (`useLink` press behavior + ARIA + cross-platform routing)                                                                                                                                                                                                                                                                                                            |
+| `ListItemRoot`                                                                                                | Concrete root primitive (View/Pressable union with bespoke `asChild` merging — interaction state + context; LeadingSlot/Content/Title/Description/Meta/TrailingSlot/SectionHeader live in `@cdx-ui/components`)                                                                                                                                                                               |
+| `useOtpInput`, `OtpInputField`                                                                                | Headless hook for OTP state machine + concrete per-cell TextInput primitive (focus management, a11y, autofill; styled layer composes `Input`/`HStack` on top)                                                                                                                                                                                                                                 |
+| `ProgressBarRoot`, `ProgressBarIndicator`                                                                     | Concrete progress primitives (Root owns percent context; Indicator maps percent to width)                                                                                                                                                                                                                                                                                                     |
+| `RadioRoot`, `RadioGroup`                                                                                     | Concrete radio primitives (Root owns interaction + checked state + `.web` split; Group owns selection contract + group context. Indicator/Label live in `@cdx-ui/components`)                                                                                                                                                                                                                 |
+| `SelectRoot`, `SelectTrigger`, `SelectContent`, `SelectItem`                                                  | Concrete select primitives (Root owns controlled value/open state; Trigger is platform-split; Content owns FocusScope + keyboard nav; Item owns selection state. Value/Icon/ItemLabel live in `@cdx-ui/components`)                                                                                                                                                                           |
+| `SliderRoot`, `SliderRail`, `SliderThumb`                                                                     | Concrete slider primitives (Root owns clamped/snapped value + orientation + keyboard/drag state + context; Rail owns rail-tap-to-seek + track layout; Thumb owns drag gesture + focus. Track/Popup/Marker/MarkerGroup live in `@cdx-ui/components`)                                                                                                                                           |
+| `useSwitch`                                                                                                   | Headless hook for `Switch` (controlled state + ARIA + interaction tracking; styled layer renders the host element)                                                                                                                                                                                                                                                                            |
+| `TileRoot`, `TileGroup`                                                                                       | Concrete tile primitives (Root owns interaction + selection state + per-tile context; Group owns selection contract + group context. LeadingSlot/Content/Title/Description/Indicator/TrailingSlot live in `@cdx-ui/components`)                                                                                                                                                               |
 
 ### Utility exports
 
-| Export                  | Description                                                                                       |
-| ----------------------- | ------------------------------------------------------------------------------------------------- |
-| `dataAttributes`        | Builds `data-hover`, `data-active`, `data-focus-visible`, etc. from an `InteractionState` object. |
-| `OverlayInsetsProvider` | Context provider for safe-area insets used by overlay/dialog positioning.                         |
-| `InteractionState`      | Type: `{ hover, focus, active, disabled, focusVisible }`.                                         |
-| `EdgeInsets`            | Type: `{ top, right, bottom, left }`.                                                             |
+| Export                   | Description                                                                                                                                                                                                            |
+| ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `dataAttributes`         | Builds `data-hover`, `data-active`, `data-focus-visible`, etc. from an `InteractionState` object.                                                                                                                      |
+| `mergeDataAttributes`    | Combines multiple data-attribute sources into one spread (prevents overwrites on web).                                                                                                                                 |
+| `domDataAttributes`      | Web-specific variant that converts data attributes to DOM-compatible format.                                                                                                                                           |
+| `mergeDomDataAttributes` | Web-specific merge variant for combining DOM data attribute sources.                                                                                                                                                   |
+| `Slot`                   | Primitives-layer `asChild` implementation — merges props/ref onto the consumer's child element.                                                                                                                        |
+| `assignRef`              | Assigns a value to a callback or object ref (`ForwardedRef<T>`), handling both forms.                                                                                                                                  |
+| `createPortalFn`         | Reference to `ReactDOM.createPortal` on web, `undefined` on native (lazy-loaded so native bundles never reference `react-dom`).                                                                                        |
+| `useAnchorPosition`      | Measures an anchor element's on-screen layout (`AnchorLayout`), with optional remeasure key and per-frame tracking; powers overlay/popup positioning (e.g. `Slider.Popup`).                                            |
+| `FormControlContext`     | Re-exported from `@cdx-ui/utils`; shared context for field/form control state.                                                                                                                                         |
+| `useFormControlContext`  | Re-exported from `@cdx-ui/utils`; reads `FormControlContext` in descendant components.                                                                                                                                 |
+| `OverlayInsetsProvider`  | Context provider for safe-area insets used by overlay/dialog positioning.                                                                                                                                              |
+| `Portal`, `PortalHost`   | Store-backed portal: `Portal` registers children into a named host; `PortalHost` renders them and must be mounted once near the app root (Forge UI's `ForgeDesignProvider` does this). Used by `Dialog`, `Toast`, etc. |
+| `FullWindowOverlay`      | iOS wrapper (over `react-native-screens`) that renders overlays in a separate window above native modals/keyboard; pass-through on Android/web.                                                                        |
+| `InteractionState`       | Type: `{ hover, focus, active, disabled, focusVisible }`.                                                                                                                                                              |
+| `EdgeInsets`             | Type: `{ top, right, bottom, left }`.                                                                                                                                                                                  |
+
+### OTP input utilities
+
+Standalone helper functions re-exported from the otp-input module for custom OTP input implementations:
+
+| Export                                         | Description                                                                  |
+| ---------------------------------------------- | ---------------------------------------------------------------------------- |
+| `applyOtpInputChange(value, change, position)` | Applies a character change (insert, delete, replace) to an OTP value string. |
+| `filterDigits(text)`                           | Filters a string to digits only (0–9).                                       |
+| `filterAllowedCharacters(text, allowed)`       | Filters a string to characters matching a provided set.                      |
+| `filterByRegExp(text, pattern)`                | Filters a string to characters matching a regular expression.                |
+
+### Context hooks and providers
+
+Several modules export context providers and hooks for reading component state from descendant sub-components or for integrating with external systems (e.g., routing).
+
+| Module    | Provider(s)                                | Hook(s)                                        | Context value type(s)                                   |
+| --------- | ------------------------------------------ | ---------------------------------------------- | ------------------------------------------------------- |
+| avatar    | —                                          | `useAvatarContext`                             | `IAvatarContextValue`                                   |
+| button    | —                                          | `useButtonContext`                             | `InteractionState`                                      |
+| checkbox  | —                                          | `useCheckboxContext`                           | `ICheckboxContextValue`                                 |
+| chip      | —                                          | `useChipContext`                               | `InteractionState`                                      |
+| dialog    | `DialogProvider`                           | `useDialog`                                    | `IDialogContextType`                                    |
+| input     | —                                          | `useInputContext`                              | `IInputContextValue`                                    |
+| link      | `LinkProvider`, `LinkInteractionProvider`  | `useLink`, `useLinkInteractionContext`         | `LinkConfig`, `LinkInteractionState`                    |
+| list-item | `ListItemProvider`                         | `useListItemContext`                           | `InteractionState`                                      |
+| otp-input | `OtpInputProvider`, `OtpCellIndexProvider` | `useOtpInputContext`, `useOtpCellIndexContext` | `OtpInputContextValue`, `OtpInputCellIndexContextValue` |
+| progress  | —                                          | `useProgressContext`                           | `ProgressContextValue`                                  |
+| radio     | `RadioProvider`                            | `useRadioContext`                              | `IRadioContextValue`                                    |
+| select    | —                                          | `useSelectContext`, `useSelectItemContext`     | `ISelectContextValue`, `ISelectItemContextValue`        |
+| slider    | —                                          | `useSliderContext`                             | `SliderContextValue`                                    |
+| tile      | `TileProvider`                             | `useTileContext`                               | `ITileContextValue`, `ITileGroupContextValue`           |
 
-The dialog module also exports `DialogProvider` and `useDialog()` for imperative control, and the link module exports `LinkProvider` for router integration.
+## License
 
-## Further reading
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](./LICENSE)
 
-- [Definitions](../../docs/internal/practices/definitions.md) — artifact taxonomy (primitive vs component vs utility)
+MIT © 2026 Digital First Holdings LLC. See [LICENSE](./LICENSE) for details.

package/coverage.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="158" height="20" role="img" aria-label="coverage: via components"><title>coverage: via components</title><filter id="blur"><feGaussianBlur stdDeviation="16"/></filter><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="158" height="20" rx="3"/></clipPath><g clip-path="url(#r)"><rect width="61" height="20" fill="#555"/><rect x="61" width="97" height="20" fill="#007ec6"/><rect width="158" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><g transform="scale(.1)"><g aria-hidden="true" fill="#010101"><text x="315" y="150" fill-opacity=".8" filter="url(#blur)" textLength="510">coverage</text><text x="315" y="150" fill-opacity=".3" textLength="510">coverage</text></g><text x="315" y="140" textLength="510">coverage</text></g><g transform="scale(.1)"><g aria-hidden="true" fill="#010101"><text x="1085" y="150" fill-opacity=".8" filter="url(#blur)" textLength="870">via components</text><text x="1085" y="150" fill-opacity=".3" textLength="870">via components</text></g><text x="1085" y="140" textLength="870">via components</text></g></g></svg>

package/lib/commonjs/CLAUDE.md

@@ -0,0 +1,86 @@
+# Primitive Authoring
+
+Auto-loaded when working in `packages/primitives/src/**`.
+
+Primitives in `@cdx-ui/primitives` are unstyled behavioral components that handle accessibility and interactions. Read the full guides before making changes:
+
+- `docs/internal/practices/composition.md` — compound component structure
+- `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.
+- **Native compound conditions** — when the styled layer needs two or more interaction states combined on native (Uniwind evaluates only the last `data-[]` condition in a chain), the primitive derives a single compound-state string via a module-scope lookup table and emits it through `dataAttributes({...})` **in parallel** with the individual booleans. Canonical example: `InputRoot.tsx`'s `FIELD_STATES` → `data-field-state` (`idle` / `invalid` / `focused` / `focused-invalid`). See `docs/internal/practices/data-attributes.md` § "Compound state on native".
+
+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 Indicator inside `packages/components/src/components/QuickActionButton/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 `mergeDataAttributes(props, dataAttributes({ ... }))` — the same pattern external consumers use.
+
+## Pattern summary
+
+Each concrete primitive is a `forwardRef` component that hardcodes its default RN base element and supports `asChild` via `Slot`:
+
+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 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.
+- **`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).
+- **Derived compound-state attributes** — when the styled layer needs a native compound condition, derive a single compound-state string via a module-scope lookup table and emit it via `dataAttributes({...})` alongside the individual booleans. `InputRoot.tsx`'s `FIELD_STATES` → `data-field-state` is the canonical example.
+- **`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/commonjs/avatar/AvatarRoot.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AvatarRoot = void 0;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _slot = require("../slot");
+var _context = require("./context");
+var _jsxRuntime = require("react/jsx-runtime");
+const AvatarRoot = exports.AvatarRoot = /*#__PURE__*/(0, _react.forwardRef)(({
+  asChild,
+  children,
+  ...props
+}, ref) => {
+  const [imageLoaded, setImageLoaded] = (0, _react.useState)(false);
+  const [imageError, setImageError] = (0, _react.useState)(false);
+  const contextValue = (0, _react.useMemo)(() => ({
+    imageLoaded,
+    imageError,
+    setImageLoaded,
+    setImageError
+  }), [imageLoaded, imageError]);
+  const Comp = asChild ? _slot.Slot : _reactNative.View;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.AvatarProvider, {
+    value: contextValue,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, {
+      ref: ref,
+      role: props.role || 'img',
+      accessibilityRole: "image",
+      ...props,
+      children: children
+    })
+  });
+});
+AvatarRoot.displayName = 'AvatarRoot';
+//# sourceMappingURL=AvatarRoot.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","_reactNative","_slot","_context","_jsxRuntime","AvatarRoot","exports","forwardRef","asChild","children","props","ref","imageLoaded","setImageLoaded","useState","imageError","setImageError","contextValue","useMemo","Comp","Slot","View","jsx","AvatarProvider","value","role","accessibilityRole","displayName"],"sourceRoot":"../../../src","sources":["avatar/AvatarRoot.tsx"],"mappings":";;;;;;AACA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AACA,IAAAG,QAAA,GAAAH,OAAA;AAA2C,IAAAI,WAAA,GAAAJ,OAAA;AAOpC,MAAMK,UAAU,GAAAC,OAAA,CAAAD,UAAA,gBAAG,IAAAE,iBAAU,EAClC,CAAC;EAAEC,OAAO;EAAEC,QAAQ;EAAE,GAAGC;AAAM,CAAC,EAAEC,GAAG,KAAK;EACxC,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAG,IAAAC,eAAQ,EAAC,KAAK,CAAC;EACrD,MAAM,CAACC,UAAU,EAAEC,aAAa,CAAC,GAAG,IAAAF,eAAQ,EAAC,KAAK,CAAC;EAEnD,MAAMG,YAAY,GAAG,IAAAC,cAAO,EAC1B,OAAO;IAAEN,WAAW;IAAEG,UAAU;IAAEF,cAAc;IAAEG;EAAc,CAAC,CAAC,EAClE,CAACJ,WAAW,EAAEG,UAAU,CAC1B,CAAC;EAED,MAAMI,IAAI,GAAGX,OAAO,GAAGY,UAAI,GAAGC,iBAAI;EAElC,oBACE,IAAAjB,WAAA,CAAAkB,GAAA,EAACnB,QAAA,CAAAoB,cAAc;IAACC,KAAK,EAAEP,YAAa;IAAAR,QAAA,eAClC,IAAAL,WAAA,CAAAkB,GAAA,EAACH,IAAI;MACHR,GAAG,EAAEA,GAAI;MACTc,IAAI,EAAEf,KAAK,CAACe,IAAI,IAAI,KAAM;MAC1BC,iBAAiB,EAAC,OAAO;MAAA,GACpBhB,KAAK;MAAAD,QAAA,EAETA;IAAQ,CACL;EAAC,CACO,CAAC;AAErB,CACF,CAAC;AAEDJ,UAAU,CAACsB,WAAW,GAAG,YAAY","ignoreList":[]}

package/lib/commonjs/avatar/index.js

@@ -3,28 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createAvatar = createAvatar;
-var _createAvatarBadge = require("./createAvatarBadge");
-var _createAvatarIcon = require("./createAvatarIcon");
-var _createAvatarText = require("./createAvatarText");
-var _createAvatarImage = require("./createAvatarImage");
-var _createAvatarRoot = require("./createAvatarRoot");
-function createAvatar(BaseComponents) {
-  const Avatar = (0, _createAvatarRoot.createAvatarRoot)(BaseComponents.Root);
-  const AvatarImage = (0, _createAvatarImage.createAvatarImage)(BaseComponents.Image);
-  const Text = (0, _createAvatarText.createAvatarText)(BaseComponents.Text);
-  const AvatarIcon = (0, _createAvatarIcon.createAvatarIcon)(BaseComponents.Icon);
-  const Badge = (0, _createAvatarBadge.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
-  });
-}
+Object.defineProperty(exports, "AvatarRoot", {
+  enumerable: true,
+  get: function () {
+    return _AvatarRoot.AvatarRoot;
+  }
+});
+Object.defineProperty(exports, "useAvatarContext", {
+  enumerable: true,
+  get: function () {
+    return _context.useAvatarContext;
+  }
+});
+var _context = require("./context");
+var _AvatarRoot = require("./AvatarRoot");
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["_createAvatarBadge","require","_createAvatarIcon","_createAvatarText","_createAvatarImage","_createAvatarRoot","createAvatar","BaseComponents","Avatar","createAvatarRoot","Root","AvatarImage","createAvatarImage","Image","Text","createAvatarText","AvatarIcon","createAvatarIcon","Icon","Badge","createAvatarBadge","displayName","Object","assign"],"sourceRoot":"../../../src","sources":["avatar/index.ts"],"mappings":";;;;;;AACA,IAAAA,kBAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAD,OAAA;AACA,IAAAE,iBAAA,GAAAF,OAAA;AACA,IAAAG,kBAAA,GAAAH,OAAA;AACA,IAAAI,iBAAA,GAAAJ,OAAA;AAYO,SAASK,YAAYA,CAAiCC,cAM5D,EAAE;EACD,MAAMC,MAAM,GAAG,IAAAC,kCAAgB,EAACF,cAAc,CAACG,IAAI,CAAC;EACpD,MAAMC,WAAW,GAAG,IAAAC,oCAAiB,EAACL,cAAc,CAACM,KAAK,CAAC;EAC3D,MAAMC,IAAI,GAAG,IAAAC,kCAAgB,EAACR,cAAc,CAACO,IAAI,CAAC;EAClD,MAAME,UAAU,GAAG,IAAAC,kCAAgB,EAACV,cAAc,CAACW,IAAI,CAAC;EACxD,MAAMC,KAAK,GAAG,IAAAC,oCAAiB,EAACb,cAAc,CAACY,KAAK,CAAC;EAErDX,MAAM,CAACa,WAAW,GAAG,iBAAiB;EACtCV,WAAW,CAACU,WAAW,GAAG,uBAAuB;EACjDP,IAAI,CAACO,WAAW,GAAG,sBAAsB;EACzCL,UAAU,CAACK,WAAW,GAAG,sBAAsB;EAC/CF,KAAK,CAACE,WAAW,GAAG,uBAAuB;EAE3C,OAAOC,MAAM,CAACC,MAAM,CAACf,MAAM,EAAE;IAC3BK,KAAK,EAAEF,WAAW;IAClBG,IAAI;IACJI,IAAI,EAAEF,UAAU;IAChBG;EACF,CAAC,CAAC;AACJ","ignoreList":[]}
+{"version":3,"names":["_context","require","_AvatarRoot"],"sourceRoot":"../../../src","sources":["avatar/index.ts"],"mappings":";;;;;;;;;;;;;;;;;AACA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA","ignoreList":[]}

package/lib/commonjs/breadcrumbs/BreadcrumbsRoot.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BreadcrumbsRoot = 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");
+const BreadcrumbsRoot = exports.BreadcrumbsRoot = /*#__PURE__*/(0, _react.forwardRef)(({
+  asChild,
+  children,
+  isDisabled = false,
+  isUnderlined = false,
+  color = 'neutral',
+  accessibilityLabel = 'Breadcrumb',
+  ...props
+}, ref) => {
+  const contextValue = (0, _react.useMemo)(() => ({
+    isDisabled,
+    isUnderlined,
+    color
+  }), [color, isDisabled, isUnderlined]);
+  const Comp = asChild ? _slot.Slot : _reactNative.View;
+  const a11yProps = _reactNative.Platform.OS === 'web' ? {
+    accessibilityRole: 'navigation',
+    'aria-label': accessibilityLabel,
+    'aria-disabled': isDisabled || undefined
+  } : {
+    accessibilityLabel
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.BreadcrumbsProvider, {
+    value: contextValue,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, {
+      ref: ref,
+      ...props,
+      ...a11yProps,
+      ...(0, _dataAttributes.mergeDataAttributes)(props, (0, _dataAttributes.dataAttributes)({
+        slot: 'breadcrumbs',
+        disabled: isDisabled
+      })),
+      children: children
+    })
+  });
+});
+BreadcrumbsRoot.displayName = 'BreadcrumbsRoot';
+//# sourceMappingURL=BreadcrumbsRoot.js.map

package/lib/commonjs/breadcrumbs/BreadcrumbsRoot.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","_reactNative","_slot","_dataAttributes","_context","_jsxRuntime","BreadcrumbsRoot","exports","forwardRef","asChild","children","isDisabled","isUnderlined","color","accessibilityLabel","props","ref","contextValue","useMemo","Comp","Slot","View","a11yProps","Platform","OS","accessibilityRole","undefined","jsx","BreadcrumbsProvider","value","mergeDataAttributes","dataAttributes","slot","disabled","displayName"],"sourceRoot":"../../../src","sources":["breadcrumbs/BreadcrumbsRoot.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;AAAgD,IAAAK,WAAA,GAAAL,OAAA;AAOzC,MAAMM,eAAe,GAAAC,OAAA,CAAAD,eAAA,gBAAG,IAAAE,iBAAU,EACvC,CACE;EACEC,OAAO;EACPC,QAAQ;EACRC,UAAU,GAAG,KAAK;EAClBC,YAAY,GAAG,KAAK;EACpBC,KAAK,GAAG,SAAS;EACjBC,kBAAkB,GAAG,YAAY;EACjC,GAAGC;AACL,CAAC,EACDC,GAAG,KACA;EACH,MAAMC,YAAY,GAAG,IAAAC,cAAO,EAC1B,OAAO;IACLP,UAAU;IACVC,YAAY;IACZC;EACF,CAAC,CAAC,EACF,CAACA,KAAK,EAAEF,UAAU,EAAEC,YAAY,CAClC,CAAC;EAED,MAAMO,IAAI,GAAGV,OAAO,GAAGW,UAAI,GAAGC,iBAAI;EAClC,MAAMC,SAAS,GACbC,qBAAQ,CAACC,EAAE,KAAK,KAAK,GAChB;IACCC,iBAAiB,EAAE,YAAqB;IACxC,YAAY,EAAEX,kBAAkB;IAChC,eAAe,EAAEH,UAAU,IAAIe;EACjC,CAAC,GACA;IACCZ;EACF,CAAW;EAEjB,oBACE,IAAAT,WAAA,CAAAsB,GAAA,EAACvB,QAAA,CAAAwB,mBAAmB;IAACC,KAAK,EAAEZ,YAAa;IAAAP,QAAA,eACvC,IAAAL,WAAA,CAAAsB,GAAA,EAACR,IAAI;MACHH,GAAG,EAAEA,GAAI;MAAA,GACLD,KAAK;MAAA,GACLO,SAAS;MAAA,GACT,IAAAQ,mCAAmB,EACrBf,KAAK,EACL,IAAAgB,8BAAc,EAAC;QAAEC,IAAI,EAAE,aAAa;QAAEC,QAAQ,EAAEtB;MAAW,CAAC,CAC9D,CAAC;MAAAD,QAAA,EAEAA;IAAQ,CACL;EAAC,CACY,CAAC;AAE1B,CACF,CAAC;AAEDJ,eAAe,CAAC4B,WAAW,GAAG,iBAAiB","ignoreList":[]}

package/lib/commonjs/breadcrumbs/context.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useBreadcrumbsContext = exports.BreadcrumbsProvider = void 0;
+var _utils = require("@cdx-ui/utils");
+const [BreadcrumbsProvider, useBreadcrumbsContext] = (0, _utils.createContext)('BreadcrumbsContext');
+exports.useBreadcrumbsContext = useBreadcrumbsContext;
+exports.BreadcrumbsProvider = BreadcrumbsProvider;
+//# sourceMappingURL=context.js.map

package/lib/commonjs/breadcrumbs/context.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_utils","require","BreadcrumbsProvider","useBreadcrumbsContext","createContext","exports"],"sourceRoot":"../../../src","sources":["breadcrumbs/context.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAGO,MAAM,CAACC,mBAAmB,EAAEC,qBAAqB,CAAC,GACvD,IAAAC,oBAAa,EAA0B,oBAAoB,CAAC;AAACC,OAAA,CAAAF,qBAAA,GAAAA,qBAAA;AAAAE,OAAA,CAAAH,mBAAA,GAAAA,mBAAA","ignoreList":[]}

package/lib/commonjs/breadcrumbs/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "BreadcrumbsRoot", {
+  enumerable: true,
+  get: function () {
+    return _BreadcrumbsRoot.BreadcrumbsRoot;
+  }
+});
+Object.defineProperty(exports, "breadcrumbColorOptions", {
+  enumerable: true,
+  get: function () {
+    return _types.breadcrumbColorOptions;
+  }
+});
+Object.defineProperty(exports, "useBreadcrumbsContext", {
+  enumerable: true,
+  get: function () {
+    return _context.useBreadcrumbsContext;
+  }
+});
+var _BreadcrumbsRoot = require("./BreadcrumbsRoot");
+var _context = require("./context");
+var _types = require("./types");
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_BreadcrumbsRoot","require","_context","_types"],"sourceRoot":"../../../src","sources":["breadcrumbs/index.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,gBAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA","ignoreList":[]}

package/lib/commonjs/breadcrumbs/types.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.breadcrumbColorOptions = void 0;
+const breadcrumbColorOptions = exports.breadcrumbColorOptions = ['neutral', 'action', 'danger', 'warning', 'success', 'info'];
+//# sourceMappingURL=types.js.map

package/lib/commonjs/breadcrumbs/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["breadcrumbColorOptions","exports"],"sourceRoot":"../../../src","sources":["breadcrumbs/types.ts"],"mappings":";;;;;;AAGO,MAAMA,sBAAsB,GAAAC,OAAA,CAAAD,sBAAA,GAAG,CACpC,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,SAAS,EACT,MAAM,CACE","ignoreList":[]}

package/lib/commonjs/button/ButtonRoot.js

@@ -0,0 +1,121 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ButtonRoot = 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 ButtonRoot = exports.ButtonRoot = /*#__PURE__*/(0, _react.forwardRef)(({
+  asChild,
+  children,
+  isDisabled,
+  isHovered: isHoveredProp,
+  isActive: isActiveProp,
+  isFocused: isFocusedProp,
+  isFocusVisible: isFocusVisibleProp,
+  ...props
+}, ref) => {
+  const {
+    isFocused,
+    focusProps
+  } = (0, _focus.useFocus)();
+  const {
+    isFocusVisible,
+    focusProps: focusRingProps
+  } = (0, _focus.useFocusRing)();
+  const {
+    pressProps: pressableProps,
+    isPressed: isActive
+  } = (0, _interactions.usePress)({
+    isDisabled
+  });
+  const {
+    isHovered,
+    hoverProps
+  } = (0, _interactions.useHover)();
+  const contextValue = (0, _react.useMemo)(() => {
+    return {
+      hover: isHoveredProp || isHovered,
+      focus: isFocusedProp || isFocused,
+      active: isActiveProp || isActive,
+      disabled: !!isDisabled,
+      focusVisible: isFocusVisibleProp || isFocusVisible
+    };
+  }, [isHovered, isHoveredProp, isFocused, isFocusedProp, isActive, isActiveProp, isDisabled, isFocusVisible, isFocusVisibleProp]);
+  if (asChild) {
+    // Dedicated asChild path: composing Button onto a child (e.g. `<Link>`) must not
+    // force `role="button"` or leak ButtonRoot's internal usePress/useHover/useFocus
+    // handlers onto it — doing so overrides the child's own role and behavior (DEVEX-6442).
+    // The hooks above still run unconditionally (rules of hooks) so ButtonProvider can
+    // expose interaction state to sub-components, but their handler props are
+    // intentionally not spread onto the child here.
+    const {
+      onPress,
+      ...restProps
+    } = props;
+    const slotProps = {
+      ...restProps,
+      disabled: isDisabled
+    };
+
+    // Only pass onPress when Button itself was given one — preserves the child's own
+    // handler (e.g. Link's navigation onPress) when Button has none of its own.
+    if (onPress) {
+      slotProps.onPress = onPress;
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.ButtonProvider, {
+      value: contextValue,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_slot.Slot, {
+        ref: ref,
+        ...slotProps,
+        ...(0, _dataAttributes.mergeDataAttributes)(props, (0, _dataAttributes.dataAttributes)({
+          hover: isHoveredProp || isHovered,
+          focus: isFocusedProp || isFocused,
+          active: isActiveProp || isActive,
+          disabled: !!isDisabled,
+          focusVisible: isFocusVisibleProp || isFocusVisible
+        })),
+        children: typeof children === 'function' ? children(contextValue) : children
+      })
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.ButtonProvider, {
+    value: contextValue,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+      ref: ref,
+      role: props?.role || 'button',
+      disabled: isDisabled,
+      ...props,
+      ...(0, _dataAttributes.mergeDataAttributes)(props, (0, _dataAttributes.dataAttributes)({
+        hover: isHoveredProp || isHovered,
+        focus: isFocusedProp || isFocused,
+        active: isActiveProp || isActive,
+        disabled: !!isDisabled,
+        focusVisible: isFocusVisibleProp || isFocusVisible
+      })),
+      onPressIn: (0, _utils.composeEventHandlers)(props?.onPressIn, pressableProps.onPressIn),
+      onPressOut: (0, _utils.composeEventHandlers)(props?.onPressOut, pressableProps.onPressOut),
+      onHoverIn: (0, _utils.composeEventHandlers)(props?.onHoverIn, hoverProps.onHoverIn),
+      onHoverOut: (0, _utils.composeEventHandlers)(props?.onHoverOut, hoverProps.onHoverOut),
+      onFocus: (0, _utils.composeEventHandlers)((0, _utils.composeEventHandlers)(props?.onFocus, focusProps.onFocus), focusRingProps.onFocus),
+      onBlur: (0, _utils.composeEventHandlers)((0, _utils.composeEventHandlers)(props?.onBlur, focusProps.onBlur), focusRingProps.onBlur),
+      children: typeof children === 'function' ? children({
+        hover: isHoveredProp || isHovered,
+        focus: isFocusedProp || isFocused,
+        active: isActiveProp || isActive,
+        disabled: !!isDisabled,
+        focusVisible: isFocusVisibleProp || isFocusVisible
+      }) : children
+    })
+  });
+});
+ButtonRoot.displayName = 'ButtonRoot';
+//# sourceMappingURL=ButtonRoot.js.map