@cdx-ui/primitives 0.0.1-beta.39 → 0.0.1-beta.40

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/lib/commonjs/CLAUDE.md +32 -0
  2. package/lib/module/CLAUDE.md +32 -0
  3. package/package.json +2 -2
  4. package/src/CLAUDE.md +32 -0
package/lib/commonjs/CLAUDE.md ADDED
@@ -0,0 +1,32 @@
1
+ # Primitive Authoring
2
+
3
+ Auto-loaded when working in `packages/primitives/src/**`.
4
+
5
+ Primitives in `@cdx-ui/primitives` are unstyled behavioral components that handle accessibility and interactions. Read the full guides before making changes:
6
+
7
+ - `docs/internal/practices/composition.md` — compound component structure
8
+ - `docs/internal/practices/types.md` — `I*Props` convention, extending RN base types
9
+ - `docs/internal/practices/accessibility.md` — ARIA roles, keyboard nav, screen reader support
10
+ - `docs/internal/practices/as-child.md` — `asChild` prop pattern
11
+
12
+ ## Pattern summary
13
+
14
+ Each primitive follows the factory function pattern (see `createButtonRoot.tsx` as the canonical example):
15
+
16
+ 1. **Factory function** — `export const createComponentPart = <T,>(BaseComponent: ComponentType<T>) => forwardRef(...)` — accepts a host element type, returns a wrapped component with behavior
17
+ 2. **Interaction hooks** — `useFocus`, `useFocusRing`, `useHover`, `usePress` from `@react-native-aria/*`
18
+ 3. **Data attributes** — `dataAttributes({ hover, focus, active, disabled, focusVisible })` emitted on the rendered element for Uniwind `data-[state]` selectors
19
+ 4. **Context provider** — interaction state exposed via context so child primitives can react to parent state
20
+ 5. **Barrel export** — `index.tsx` re-exports the factory, context, and types
21
+
22
+ ## Key rules
23
+
24
+ - **Unstyled** — no visual styling (no `className`, no color/spacing classes). Only behavioral and a11y concerns.
25
+ - **`I*Props` convention** — interface types prefixed with `I` (e.g., `IButtonProps`, `ICheckboxProps`), exported from `types.ts`
26
+ - **`InterfaceComponentProps`** extends the appropriate RN base type (`PressableProps`, `ViewProps`, etc.) with interaction state booleans (`isHovered`, `isActive`, `isFocused`, `isFocusVisible`, `isDisabled`)
27
+ - **`dataAttributes()` helper** — always use the helper from `../utils/dataAttributes` to emit `data-*` props; it handles platform differences (native vs web)
28
+ - **`composeEventHandlers`** from `@cdx-ui/utils` — merge consumer handlers with internal handlers; never silently override
29
+ - **`forwardRef`** on every component — refs forwarded to the underlying host element
30
+ - **ARIA roles** — set `role` with a sensible default (e.g., `role={props?.role || 'button'}`)
31
+ - **Render children as function** — support `children` as `(state: InteractionState) => ReactNode` for state-driven rendering
32
+ - **Consumable independently** of `@cdx-ui/components` — no imports from the styled layer
package/lib/module/CLAUDE.md ADDED
@@ -0,0 +1,32 @@
1
+ # Primitive Authoring
2
+
3
+ Auto-loaded when working in `packages/primitives/src/**`.
4
+
5
+ Primitives in `@cdx-ui/primitives` are unstyled behavioral components that handle accessibility and interactions. Read the full guides before making changes:
6
+
7
+ - `docs/internal/practices/composition.md` — compound component structure
8
+ - `docs/internal/practices/types.md` — `I*Props` convention, extending RN base types
9
+ - `docs/internal/practices/accessibility.md` — ARIA roles, keyboard nav, screen reader support
10
+ - `docs/internal/practices/as-child.md` — `asChild` prop pattern
11
+
12
+ ## Pattern summary
13
+
14
+ Each primitive follows the factory function pattern (see `createButtonRoot.tsx` as the canonical example):
15
+
16
+ 1. **Factory function** — `export const createComponentPart = <T,>(BaseComponent: ComponentType<T>) => forwardRef(...)` — accepts a host element type, returns a wrapped component with behavior
17
+ 2. **Interaction hooks** — `useFocus`, `useFocusRing`, `useHover`, `usePress` from `@react-native-aria/*`
18
+ 3. **Data attributes** — `dataAttributes({ hover, focus, active, disabled, focusVisible })` emitted on the rendered element for Uniwind `data-[state]` selectors
19
+ 4. **Context provider** — interaction state exposed via context so child primitives can react to parent state
20
+ 5. **Barrel export** — `index.tsx` re-exports the factory, context, and types
21
+
22
+ ## Key rules
23
+
24
+ - **Unstyled** — no visual styling (no `className`, no color/spacing classes). Only behavioral and a11y concerns.
25
+ - **`I*Props` convention** — interface types prefixed with `I` (e.g., `IButtonProps`, `ICheckboxProps`), exported from `types.ts`
26
+ - **`InterfaceComponentProps`** extends the appropriate RN base type (`PressableProps`, `ViewProps`, etc.) with interaction state booleans (`isHovered`, `isActive`, `isFocused`, `isFocusVisible`, `isDisabled`)
27
+ - **`dataAttributes()` helper** — always use the helper from `../utils/dataAttributes` to emit `data-*` props; it handles platform differences (native vs web)
28
+ - **`composeEventHandlers`** from `@cdx-ui/utils` — merge consumer handlers with internal handlers; never silently override
29
+ - **`forwardRef`** on every component — refs forwarded to the underlying host element
30
+ - **ARIA roles** — set `role` with a sensible default (e.g., `role={props?.role || 'button'}`)
31
+ - **Render children as function** — support `children` as `(state: InteractionState) => ReactNode` for state-driven rendering
32
+ - **Consumable independently** of `@cdx-ui/components` — no imports from the styled layer
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cdx-ui/primitives",
3
- "version": "0.0.1-beta.39",
3
+ "version": "0.0.1-beta.40",
4
4
  "main": "lib/commonjs/index.js",
5
5
  "module": "lib/module/index.js",
6
6
  "react-native": "src/index.ts",
@@ -60,7 +60,7 @@
60
60
  "@react-stately/checkbox": "3.7.4",
61
61
  "@react-stately/radio": "3.12.0",
62
62
  "@react-stately/toggle": "3.9.4",
63
- "@cdx-ui/utils": "0.0.1-beta.39"
63
+ "@cdx-ui/utils": "0.0.1-beta.40"
64
64
  },
65
65
  "devDependencies": {
66
66
  "@types/react": "*",
package/src/CLAUDE.md ADDED
@@ -0,0 +1,32 @@
1
+ # Primitive Authoring
2
+
3
+ Auto-loaded when working in `packages/primitives/src/**`.
4
+
5
+ Primitives in `@cdx-ui/primitives` are unstyled behavioral components that handle accessibility and interactions. Read the full guides before making changes:
6
+
7
+ - `docs/internal/practices/composition.md` — compound component structure
8
+ - `docs/internal/practices/types.md` — `I*Props` convention, extending RN base types
9
+ - `docs/internal/practices/accessibility.md` — ARIA roles, keyboard nav, screen reader support
10
+ - `docs/internal/practices/as-child.md` — `asChild` prop pattern
11
+
12
+ ## Pattern summary
13
+
14
+ Each primitive follows the factory function pattern (see `createButtonRoot.tsx` as the canonical example):
15
+
16
+ 1. **Factory function** — `export const createComponentPart = <T,>(BaseComponent: ComponentType<T>) => forwardRef(...)` — accepts a host element type, returns a wrapped component with behavior
17
+ 2. **Interaction hooks** — `useFocus`, `useFocusRing`, `useHover`, `usePress` from `@react-native-aria/*`
18
+ 3. **Data attributes** — `dataAttributes({ hover, focus, active, disabled, focusVisible })` emitted on the rendered element for Uniwind `data-[state]` selectors
19
+ 4. **Context provider** — interaction state exposed via context so child primitives can react to parent state
20
+ 5. **Barrel export** — `index.tsx` re-exports the factory, context, and types
21
+
22
+ ## Key rules
23
+
24
+ - **Unstyled** — no visual styling (no `className`, no color/spacing classes). Only behavioral and a11y concerns.
25
+ - **`I*Props` convention** — interface types prefixed with `I` (e.g., `IButtonProps`, `ICheckboxProps`), exported from `types.ts`
26
+ - **`InterfaceComponentProps`** extends the appropriate RN base type (`PressableProps`, `ViewProps`, etc.) with interaction state booleans (`isHovered`, `isActive`, `isFocused`, `isFocusVisible`, `isDisabled`)
27
+ - **`dataAttributes()` helper** — always use the helper from `../utils/dataAttributes` to emit `data-*` props; it handles platform differences (native vs web)
28
+ - **`composeEventHandlers`** from `@cdx-ui/utils` — merge consumer handlers with internal handlers; never silently override
29
+ - **`forwardRef`** on every component — refs forwarded to the underlying host element
30
+ - **ARIA roles** — set `role` with a sensible default (e.g., `role={props?.role || 'button'}`)
31
+ - **Render children as function** — support `children` as `(state: InteractionState) => ReactNode` for state-driven rendering
32
+ - **Consumable independently** of `@cdx-ui/components` — no imports from the styled layer