@cdx-ui/components 0.2.4 → 0.2.5

package/docs/components/accordion/content.md

@@ -161,7 +161,7 @@ export default function AccordionFullBleedDemo() {
   return (
     <Card className="w-full max-w-md">
       <Card.Header>
-        <VStack className="gap-0.5">
+        <VStack space="xs">
           <Text size="sm" color="secondary">
             Upcoming payment
           </Text>
@@ -242,7 +242,7 @@ export default function AccordionFullBleedDemo() {
         </VStack>
       </Card.Content>
       <Card.Footer>
-        <Button color="action" fullWidth>
+        <Button fullWidth>
           <Button.Label>Review payment</Button.Label>
         </Button>
       </Card.Footer>

package/docs/components/alert/content.md

@@ -15,7 +15,7 @@ import { Alert } from '@cdx-ui/components';
 
 export default function AlertBasicDemo() {
   return (
-    <Alert severity="info">
+    <Alert>
       <Alert.Icon />
       <Alert.Title>Scheduled maintenance</Alert.Title>
       <Alert.Description>

package/docs/components/badge/content.md

@@ -28,7 +28,7 @@ export default function BadgeBasicDemo() {
         </Avatar>
       </Badge>
       <Badge label="New" color="info" overlap="rectangular">
-        <Button variant="outline" color="action">
+        <Button variant="outline">
           <Button.Label>Inbox</Button.Label>
         </Button>
       </Badge>
@@ -113,12 +113,7 @@ export default function BadgeWithIconDemo() {
         </Avatar>
       </Badge>
       <Badge icon={Check} color="action" overlap="circular">
-        <IconButton
-          as={Notifications}
-          variant="subtle"
-          color="neutral"
-          accessibilityLabel="Notifications"
-        />
+        <IconButton as={Notifications} variant="subtle" accessibilityLabel="Notifications" />
       </Badge>
     </Box>
   );
@@ -176,22 +171,17 @@ export default function BadgeOverlapDemo() {
           </Avatar>
         </Badge>
         <Badge label={5} color="danger" overlap="circular" accessibilityLabel="5 notifications">
-          <IconButton
-            as={Notifications}
-            variant="subtle"
-            color="neutral"
-            accessibilityLabel="Notifications"
-          />
+          <IconButton as={Notifications} variant="subtle" accessibilityLabel="Notifications" />
         </Badge>
       </Box>
       <Box className="flex-row flex-wrap items-center gap-6">
         <Badge label={5} color="danger" overlap="rectangular" accessibilityLabel="5 notifications">
-          <Button variant="outline" color="action">
+          <Button variant="outline">
             <Button.Label>Inbox</Button.Label>
           </Button>
         </Badge>
         <Badge label="New" color="info" overlap="rectangular">
-          <Button variant="solid" color="action">
+          <Button>
             <Button.Label>Updates</Button.Label>
           </Button>
         </Badge>

package/docs/components/bottom-sheet/content.md

@@ -25,7 +25,7 @@ export default function BottomSheetBasicDemo() {
 
   return (
     <BottomSheetDemoFrame>
-      <Button variant="solid" color="action" onPress={present}>
+      <Button onPress={present}>
         <Button.Label>Open sheet</Button.Label>
       </Button>
       <BottomSheet.Modal ref={ref}>
@@ -56,14 +56,14 @@ export default function BottomSheetWithFooterDemo() {
 
   return (
     <BottomSheetDemoFrame>
-      <Button variant="solid" color="action" onPress={present}>
+      <Button onPress={present}>
         <Button.Label>Open sheet</Button.Label>
       </Button>
       <BottomSheet.Modal
         ref={ref}
         footer={
           <BottomSheet.Footer>
-            <Button variant="solid" color="action" onPress={dismiss}>
+            <Button onPress={dismiss}>
               <Button.Label>Confirm</Button.Label>
             </Button>
           </BottomSheet.Footer>
@@ -96,10 +96,10 @@ export default function BottomSheetHeaderVariantsDemo() {
   return (
     <BottomSheetDemoFrame>
       <Box className="flex-row gap-3">
-        <Button variant="outline" color="action" onPress={presentBasic}>
+        <Button variant="outline" onPress={presentBasic}>
           <Button.Label>Title + close</Button.Label>
         </Button>
-        <Button variant="outline" color="action" onPress={presentFull}>
+        <Button variant="outline" onPress={presentFull}>
           <Button.Label>Back + subtitle</Button.Label>
         </Button>
       </Box>
@@ -134,7 +134,7 @@ export default function BottomSheetHeaderVariantsDemo() {
 ## Scrollable content
 
 ```tsx
-import { BottomSheet, useBottomSheet, Box, Button, Text } from '@cdx-ui/components';
+import { BottomSheet, Button, ListItem, useBottomSheet } from '@cdx-ui/components';
 import { BottomSheetDemoFrame } from './_frame';
 
 const ITEMS = Array.from({ length: 12 }, (_, i) => ({
@@ -147,7 +147,7 @@ export default function BottomSheetScrollableDemo() {
 
   return (
     <BottomSheetDemoFrame>
-      <Button variant="solid" color="action" onPress={present}>
+      <Button onPress={present}>
         <Button.Label>Scrollable content</Button.Label>
       </Button>
       <BottomSheet.Modal
@@ -156,7 +156,7 @@ export default function BottomSheetScrollableDemo() {
         enableDynamicSizing={false}
         footer={
           <BottomSheet.Footer>
-            <Button variant="solid" color="action" onPress={dismiss}>
+            <Button onPress={dismiss}>
               <Button.Label>Done</Button.Label>
             </Button>
           </BottomSheet.Footer>
@@ -166,9 +166,11 @@ export default function BottomSheetScrollableDemo() {
         <BottomSheet.ScrollView style={{ flex: 1 }} contentContainerStyle={{ flexGrow: 1 }}>
           <BottomSheet.Content>
             {ITEMS.map((item) => (
-              <Box key={item.id} className="border-b border-stroke-secondary py-3">
-                <Text>{item.label}</Text>
-              </Box>
+              <ListItem key={item.id}>
+                <ListItem.Content>
+                  <ListItem.Title>{item.label}</ListItem.Title>
+                </ListItem.Content>
+              </ListItem>
             ))}
           </BottomSheet.Content>
         </BottomSheet.ScrollView>
@@ -191,7 +193,7 @@ export default function BottomSheetSnapPointsDemo() {
 
   return (
     <BottomSheetDemoFrame>
-      <Button variant="solid" color="action" onPress={present}>
+      <Button onPress={present}>
         <Button.Label>Fixed snap points</Button.Label>
       </Button>
       <BottomSheet.Modal
@@ -200,7 +202,7 @@ export default function BottomSheetSnapPointsDemo() {
         enableDynamicSizing={false}
         footer={
           <BottomSheet.Footer>
-            <Button variant="solid" color="action" onPress={dismiss}>
+            <Button onPress={dismiss}>
               <Button.Label>Close</Button.Label>
             </Button>
           </BottomSheet.Footer>
@@ -232,7 +234,7 @@ export default function BottomSheetHandleHiddenDemo() {
 
   return (
     <BottomSheetDemoFrame>
-      <Button variant="solid" color="action" onPress={present}>
+      <Button onPress={present}>
         <Button.Label>No drag handle</Button.Label>
       </Button>
       <BottomSheet.Modal ref={ref} handleVisible={false}>

package/docs/components/box/content.md

@@ -0,0 +1,141 @@
+# Box (https://design.candescent.com/docs/components/box)
+
+Resources: [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/layout-box--default)
+
+`Box` groups and lays out content on every platform. Use it wherever you would reach for a `View` or `div`.
+
+```tsx
+import { Box } from '@cdx-ui/components';
+```
+
+## Basic
+
+Use `Box` with layout classes, spacing-scale padding and a semantic surface background to build a section of a screen. For rows and columns with a token gap, use [`HStack` and `VStack`](https://design.candescent.com/docs/components/stack/content.md).
+
+```tsx
+import { Box, Heading, Text } from '@cdx-ui/components';
+
+export default function BoxBasicDemo() {
+  return (
+    <Box className="w-full max-w-sm gap-1 bg-surface-secondary p-4">
+      <Heading size="sm">Everyday Checking</Heading>
+      <Text color="secondary">Available balance $2,481.06</Text>
+    </Box>
+  );
+}
+```
+
+## Semantic elements
+
+Set `role` to render a semantic element on web. Native platforms expose the same role to assistive technology and render a view.
+
+```tsx
+import { Box, Link } from '@cdx-ui/components';
+
+const LINKS = [
+  { label: 'Accounts', href: 'https://example.com/accounts' },
+  { label: 'Transfers', href: 'https://example.com/transfers' },
+  { label: 'Statements', href: 'https://example.com/statements' },
+] as const;
+
+export default function BoxSemanticElementsDemo() {
+  return (
+    <Box role="navigation" aria-label="Banking">
+      <Box role="list" className="flex-row gap-6">
+        {LINKS.map((link) => (
+          <Box key={link.label} role="listitem">
+            <Link href={link.href}>
+              <Link.Label>{link.label}</Link.Label>
+            </Link>
+          </Box>
+        ))}
+      </Box>
+    </Box>
+  );
+}
+```
+
+| `role`          | Web element |
+| --------------- | ----------- |
+| `article`       | `<article>` |
+| `banner`        | `<header>`  |
+| `complementary` | `<aside>`   |
+| `contentinfo`   | `<footer>`  |
+| `figure`        | `<figure>`  |
+| `form`          | `<form>`    |
+| `list`          | `<ul>`      |
+| `listitem`      | `<li>`      |
+| `main`          | `<main>`    |
+| `navigation`    | `<nav>`     |
+| `region`        | `<section>` |
+
+Any other role, or no role, renders a `<div>`. For headings and text use [`Heading`](https://design.candescent.com/docs/components/heading/content.md) and [`Text`](https://design.candescent.com/docs/components/text/content.md), not a `Box` with a text role.
+
+## As child
+
+Set `asChild` to apply Box's props to its only child instead of rendering another view. Here a `ScrollView` takes the Box's role, label and layout classes.
+
+```tsx
+import { Box, HStack, ScrollView, Text } from '@cdx-ui/components';
+
+const TRANSACTIONS = [
+  { label: 'Springfield Electric', amount: '−$84.12' },
+  { label: 'Payroll deposit', amount: '+$2,150.00' },
+  { label: 'Corner Market', amount: '−$23.47' },
+  { label: 'Transfer to Savings', amount: '−$200.00' },
+  { label: 'City Water', amount: '−$41.90' },
+  { label: 'Coffee House', amount: '−$5.25' },
+] as const;
+
+export default function BoxAsChildDemo() {
+  return (
+    <Box
+      asChild
+      role="region"
+      aria-label="Recent transactions"
+      className="h-40 w-full max-w-sm bg-surface-secondary"
+    >
+      <ScrollView contentContainerClassName="gap-3 p-4">
+        {TRANSACTIONS.map((transaction) => (
+          <HStack key={transaction.label} className="justify-between">
+            <Text>{transaction.label}</Text>
+            <Text color="secondary">{transaction.amount}</Text>
+          </HStack>
+        ))}
+      </ScrollView>
+    </Box>
+  );
+}
+```
+
+## API
+
+### Box
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `className?` | `string` | — | — |
+| `children?` | `React.ReactNode` | — | — |
+| `asChild?` | `boolean` | — | Renders the child element in place of the default `View`, merging Box's props onto it. |
+
+Inherits all [`ViewProps`](https://reactnative.dev/docs/view#props). Every `ViewProps` prop and the `ref` pass through to the rendered view unchanged. Type a ref with `BoxRef`:
+
+```tsx
+import { Box, type BoxRef } from '@cdx-ui/components';
+
+const ref = useRef<BoxRef>(null);
+
+<Box ref={ref} />;
+```
+
+## Anatomy
+
+| `data-slot` | Element |
+| ----------- | ------- |
+| `box`       | Root    |
+
+## Accessibility
+
+`Box` sets no role and adds no keyboard, focus or labeling behavior. Accessibility props such as `role`, `aria-label`, `accessibilityLabel` and `importantForAccessibility` pass through to the rendered view.
+
+Give a landmark role (`navigation`, `region`, `complementary`) an `aria-label` when the page has more than one landmark of that type, so screen-reader users can tell them apart.

package/docs/components/breadcrumbs/content.md

@@ -65,13 +65,14 @@ export default function BreadcrumbsCustomSeparatorDemo() {
 ## With icons
 
 Items accept custom content, including icons and text. A custom icon can also be used as the separator.
+An `Icon` or `Text` placed directly in an item follows the item's color in every state (ancestor, hover,
+current page, disabled), and one passed as `separator` follows the separator color, so neither needs color
+classes. Set `color` on it to override.
 
 ```tsx
 import { Breadcrumbs, Icon, Text } from '@cdx-ui/components';
 import { ChevronRight, Home, Storefront } from '@cdx-ui/icons';
 
-// Interim: an Icon inside Breadcrumbs.Item does not inherit the item's color yet, so the icons set
-// it with `web:text-inherit native:text-content-primary`.
 export default function BreadcrumbsWithIconsDemo() {
   return (
     <Breadcrumbs
@@ -79,7 +80,6 @@ export default function BreadcrumbsWithIconsDemo() {
       separator={
         <Icon
           as={ChevronRight}
-          color="tertiary"
           className="size-4"
           accessibilityElementsHidden
           importantForAccessibility="no-hide-descendants"
@@ -89,20 +89,20 @@ export default function BreadcrumbsWithIconsDemo() {
       <Breadcrumbs.Item href="#home">
         <Icon
           as={Home}
-          className="size-4 web:text-inherit native:text-content-primary"
+          className="size-4"
           accessibilityElementsHidden
           importantForAccessibility="no-hide-descendants"
         />
-        <Text className="text-inherit">Home</Text>
+        <Text>Home</Text>
       </Breadcrumbs.Item>
       <Breadcrumbs.Item href="#marketplace">
         <Icon
           as={Storefront}
-          className="size-4 web:text-inherit native:text-content-primary"
+          className="size-4"
           accessibilityElementsHidden
           importantForAccessibility="no-hide-descendants"
         />
-        <Text className="text-inherit">Marketplace</Text>
+        <Text>Marketplace</Text>
       </Breadcrumbs.Item>
       <Breadcrumbs.Item>Product details</Breadcrumbs.Item>
     </Breadcrumbs>
@@ -138,7 +138,7 @@ The navigation landmark and state provider for the breadcrumb trail.
 | --- | --- | --- | --- |
 | `className?` | `string` | — | — |
 | `children?` | `ReactNode` | — | — |
-| `separator?` | `ReactNode` | ``/`` | Separator rendered between breadcrumb items. |
+| `separator?` | `ReactNode` | ``/`` | Separator rendered between breadcrumb items. A direct `Icon` or `Text` child takes the separator color unless it sets `color`. |
 | `isDisabled?` | `boolean` | `false` | When `true`, ancestor items are not interactive and use muted text. The current page keeps its color. |
 | `isUnderlined?` | `boolean` | `false` | When `true`, interactive ancestor items are underlined. |
 | `color?` | `'neutral' \| 'action' \| 'danger' \| 'warning' \| 'success' \| 'info'` | `'neutral'` | Semantic color for ancestor items. `neutral` uses the standard text hierarchy. |
@@ -154,7 +154,7 @@ A segment in the trail. Ancestor items with an `href` are interactive. The final
 | Prop | Type | Default | Description |
 | --- | --- | --- | --- |
 | `className?` | `string` | — | — |
-| `children?` | `ReactNode` | — | — |
+| `children?` | `ReactNode` | — | Item content. A direct `Icon` or `Text` child takes the item's state color unless it sets `color`. |
 | `href?` | `string` | — | URL or route path opened on press. Omit when the link only runs `onPress`. |
 | `action?` | `'navigate' \| 'push' \| 'replace'` | — | Navigation action forwarded to the `LinkProvider`. Defaults to `'navigate'`. |
 | `isVisited?` | `boolean` | — | If true, the link will render in its visited style (native). On web, visited styling is driven by the CSS `:visited` pseudo-class. |

package/docs/components/button/content.md

@@ -38,19 +38,19 @@ import { Button, Box } from '@cdx-ui/components';
 export default function ButtonSolidDemo() {
   return (
     <Box className="flex-row gap-4">
-      <Button variant="solid" color="action">
+      <Button color="action">
         <Button.Label>Action</Button.Label>
       </Button>
-      <Button variant="solid" color="danger">
+      <Button color="danger">
         <Button.Label>Danger</Button.Label>
       </Button>
-      <Button variant="solid" color="warning">
+      <Button color="warning">
         <Button.Label>Warning</Button.Label>
       </Button>
-      <Button variant="solid" color="success">
+      <Button color="success">
         <Button.Label>Success</Button.Label>
       </Button>
-      <Button variant="solid" color="info">
+      <Button color="info">
         <Button.Label>Info</Button.Label>
       </Button>
     </Box>
@@ -123,10 +123,10 @@ export default function ButtonSizeDemo() {
   return (
     <Box className="flex-row gap-4">
       <Box className="flex-col gap-4">
-        <Button variant="solid" size="default">
+        <Button size="default">
           <Button.Label>Default</Button.Label>
         </Button>
-        <Button variant="solid" size="small">
+        <Button size="small">
           <Button.Label>Small</Button.Label>
         </Button>
       </Box>
@@ -154,12 +154,12 @@ export default function ButtonSizeDemo() {
 ## With icons
 
 ```tsx
-import { Button, View } from '@cdx-ui/components';
+import { Box, Button } from '@cdx-ui/components';
 import { AddIcon, DeleteIcon, SendIcon } from '@cdx-ui/icons';
 
 export default function ButtonIconsDemo() {
   return (
-    <View className="flex-row flex-wrap gap-4">
+    <Box className="flex-row flex-wrap gap-4">
       <Button variant="outline">
         <Button.Icon as={AddIcon} />
         <Button.Label>Add</Button.Label>
@@ -172,7 +172,7 @@ export default function ButtonIconsDemo() {
         <Button.Label>Send</Button.Label>
         <Button.Icon as={SendIcon} />
       </Button>
-    </View>
+    </Box>
   );
 }
 ```
@@ -185,15 +185,15 @@ import { Button, Box } from '@cdx-ui/components';
 export default function ButtonLoadingDemo() {
   return (
     <Box className="flex-row flex-wrap gap-4">
-      <Button variant="solid" color="action">
+      <Button>
         <Button.Spinner />
         <Button.Label>Loading</Button.Label>
       </Button>
-      <Button variant="outline" color="action">
+      <Button variant="outline">
         <Button.Spinner />
         <Button.Label>Loading</Button.Label>
       </Button>
-      <Button variant="ghost" color="action">
+      <Button variant="ghost">
         <Button.Spinner />
         <Button.Label>Loading</Button.Label>
       </Button>
@@ -210,7 +210,7 @@ import { Button, Box } from '@cdx-ui/components';
 export default function ButtonFullWidthDemo() {
   return (
     <Box className="gap-4 w-64">
-      <Button fullWidth variant="solid">
+      <Button fullWidth>
         <Button.Label>Submit</Button.Label>
       </Button>
       <Button fullWidth variant="outline">
@@ -232,19 +232,19 @@ import { Button, Box } from '@cdx-ui/components';
 export default function ButtonDisabledDemo() {
   return (
     <Box className="flex-row flex-wrap gap-4">
-      <Button variant="solid" color="action" isDisabled>
+      <Button color="action" isDisabled>
         <Button.Label>Action</Button.Label>
       </Button>
-      <Button variant="solid" color="danger" isDisabled>
+      <Button color="danger" isDisabled>
         <Button.Label>Danger</Button.Label>
       </Button>
-      <Button variant="solid" color="warning" isDisabled>
+      <Button color="warning" isDisabled>
         <Button.Label>Warning</Button.Label>
       </Button>
-      <Button variant="solid" color="success" isDisabled>
+      <Button color="success" isDisabled>
         <Button.Label>Success</Button.Label>
       </Button>
-      <Button variant="solid" color="info" isDisabled>
+      <Button color="info" isDisabled>
         <Button.Label>Info</Button.Label>
       </Button>
     </Box>

package/docs/components/card/content.md

@@ -96,7 +96,7 @@ export default function CardWithActionsDemo() {
         <Button variant="outline" className="flex-1">
           <Button.Label>Learn more</Button.Label>
         </Button>
-        <Button color="action" className="flex-1">
+        <Button className="flex-1">
           <Button.Label>Apply</Button.Label>
         </Button>
       </Card.Footer>
@@ -168,7 +168,7 @@ export default function CardFullBleedDemo() {
         ))}
       </Card.Content>
       <Card.Footer>
-        <Button variant="outline" color="action" fullWidth onPress={() => {}}>
+        <Button variant="outline" fullWidth onPress={() => {}}>
           <Button.Label>Pay due bills</Button.Label>
         </Button>
       </Card.Footer>

package/docs/components/carousel/content.md

@@ -20,7 +20,7 @@ export default function CarouselBasicDemo() {
   return (
     <Carousel
       data={SLIDES}
-      style={{ width: 320, height: 220 }}
+      className="h-55 w-80"
       loop
       renderItem={({ item }) => <CarouselSlide {...item} />}
     />
@@ -43,7 +43,7 @@ export default function CarouselWithPaginationDemo() {
     <Box className="w-80 gap-3">
       <Carousel
         data={SLIDES}
-        style={{ width: 320, height: 220 }}
+        className="h-55 w-80"
         loop
         renderItem={({ item }) => <CarouselSlide {...item} />}
       >
@@ -87,7 +87,7 @@ function HeaderRowSample() {
       <Carousel
         ref={ref}
         data={SLIDES}
-        style={{ width: 320, height: 220 }}
+        className="h-55 w-80"
         loop={false}
         onProgressChange={progress}
         renderItem={({ item }) => <CarouselSlide {...item} />}
@@ -110,7 +110,7 @@ function FlankingSample() {
       <Carousel
         ref={ref}
         data={SLIDES}
-        style={{ width: 252, height: 220 }}
+        className="h-55 w-63"
         loop={false}
         onProgressChange={progress}
         renderItem={({ item }) => <CarouselSlide {...item} />}
@@ -151,7 +151,7 @@ export default function CarouselVerticalDemo() {
   return (
     <Carousel
       data={SLIDES}
-      style={{ width: 320, height: 420 }}
+      className="h-105 w-80"
       vertical
       renderItem={({ item }) => <CarouselSlide {...item} />}
     />
@@ -173,7 +173,7 @@ export default function CarouselParallaxDemo() {
   return (
     <Carousel
       data={SLIDES}
-      style={{ width: 320, height: 220 }}
+      className="h-55 w-80"
       mode="parallax"
       modeConfig={{ parallaxScrollingScale: 0.9, parallaxScrollingOffset: 50 }}
       renderItem={({ item }) => <CarouselSlide {...item} />}
@@ -200,7 +200,7 @@ export default function CarouselAutoplayDemo() {
       <Carousel
         ref={ref}
         data={SLIDES}
-        style={{ width: 320, height: 220 }}
+        className="h-55 w-80"
         loop
         autoPlay
         autoPlayInterval={2000}
@@ -327,7 +327,7 @@ Ghost `IconButton` prev/next controls. Nest inside `Carousel` to read context, o
 | `onPointerUpCapture?` | `((event: PointerEvent) => void)` | — | — |
 | `accessible?` | `boolean` | — | When true, indicates that the view is an accessibility element. By default, all the touchable elements are accessible. |
 | `accessibilityActions?` | `readonly Readonly<{ name: AccessibilityActionName \| string; label?: string; }>[]` | — | Provides an array of custom actions available for accessibility. |
-| `aria-label?` | `string` | — | Alias for accessibilityLabel https://reactnative.dev/docs/view#accessibilitylabel https://github.com/facebook/react-native/issues/34424 |
+| `aria-label?` | `string` | — | Alias for accessibilityLabel https://reactnative.dev/docs/view#accessibilitylabel https://github.com/react/react-native/issues/34424 |
 | `accessibilityRole?` | `'none' \| 'button' \| 'togglebutton' \| 'link' \| 'search' \| 'image' \| 'keyboardkey' \| 'text' \| 'adjustable' \| 'imagebutton' \| 'header' \| 'summary' \| 'alert' \| 'checkbox' \| 'combobox' \| 'menu' \| 'menubar' \| 'menuitem' \| 'progressbar' \| 'radio' \| 'radiogroup' \| 'scrollbar' \| 'spinbutton' \| 'switch' \| 'tab' \| 'tabbar' \| 'tablist' \| 'timer' \| 'list' \| 'toolbar'` | — | Accessibility Role tells a person using either VoiceOver on iOS or TalkBack on Android the type of element that is focused on. |
 | `accessibilityState?` | `AccessibilityState` | — | Accessibility State tells a person using either VoiceOver on iOS or TalkBack on Android the state of the element currently focused on. |
 | `aria-busy?` | `boolean` | — | alias for accessibilityState see https://reactnative.dev/docs/accessibility#accessibilitystate |
@@ -367,6 +367,7 @@ Ghost `IconButton` prev/next controls. Nest inside `Carousel` to read context, o
 | `onHoverIn?` | `((event: MouseEvent) => void) \| null` | — | Called when the hover is activated to provide visual feedback. |
 | `onHoverOut?` | `((event: MouseEvent) => void) \| null` | — | Called when the hover is deactivated to undo visual feedback. |
 | `onPressIn?` | `((event: GestureResponderEvent) => void) \| null` | — | Called when a touch is engaged before `onPress`. |
+| `onPressMove?` | `((event: GestureResponderEvent) => void) \| null` | — | Called when the press location moves. |
 | `onPressOut?` | `((event: GestureResponderEvent) => void) \| null` | — | Called when a touch is released before `onPress`. |
 | `onLongPress?` | `((event: GestureResponderEvent) => void) \| null` | — | Called when a long-tap gesture is detected. |
 | `cancelable?` | `boolean \| null` | — | Whether a press gesture can be interrupted by a parent gesture such as a scroll event. Defaults to true. |

package/docs/components/chip/content.md

@@ -393,7 +393,7 @@ Displays an avatar inside the chip, sized to fit the chip's `size` variant.
 | `accessible?` | `boolean` | — | When true, indicates that the view is an accessibility element. By default, all the touchable elements are accessible. |
 | `accessibilityActions?` | `readonly Readonly<{ name: AccessibilityActionName \| string; label?: string; }>[]` | — | Provides an array of custom actions available for accessibility. |
 | `accessibilityLabel?` | `string` | — | Overrides the text that's read by the screen reader when the user interacts with the element. By default, the label is constructed by traversing all the children and accumulating all the Text nodes separated by space. |
-| `aria-label?` | `string` | — | Alias for accessibilityLabel https://reactnative.dev/docs/view#accessibilitylabel https://github.com/facebook/react-native/issues/34424 |
+| `aria-label?` | `string` | — | Alias for accessibilityLabel https://reactnative.dev/docs/view#accessibilitylabel https://github.com/react/react-native/issues/34424 |
 | `accessibilityRole?` | `'none' \| 'button' \| 'togglebutton' \| 'link' \| 'search' \| 'image' \| 'keyboardkey' \| 'text' \| 'adjustable' \| 'imagebutton' \| 'header' \| 'summary' \| 'alert' \| 'checkbox' \| 'combobox' \| 'menu' \| 'menubar' \| 'menuitem' \| 'progressbar' \| 'radio' \| 'radiogroup' \| 'scrollbar' \| 'spinbutton' \| 'switch' \| 'tab' \| 'tabbar' \| 'tablist' \| 'timer' \| 'list' \| 'toolbar'` | — | Accessibility Role tells a person using either VoiceOver on iOS or TalkBack on Android the type of element that is focused on. |
 | `accessibilityState?` | `AccessibilityState` | — | Accessibility State tells a person using either VoiceOver on iOS or TalkBack on Android the state of the element currently focused on. |
 | `aria-busy?` | `boolean` | — | alias for accessibilityState see https://reactnative.dev/docs/accessibility#accessibilitystate |

package/docs/components/color-area/content.md

@@ -1,20 +1,18 @@
-# ColorArea (https://design.candescent.com/docs/components/color-area)
+# Color Area (https://design.candescent.com/docs/components/color-area)
 
 Resources: [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/inputs-colorarea--default)
 
 `ColorArea` selects saturation horizontally and brightness vertically.
 
 ```tsx
-import { ColorArea } from '@cdx-ui/components';
-import { parseColor } from '@cdx-ui/primitives';
+import { ColorArea, parseColor } from '@cdx-ui/components';
 ```
 
 ## Basic
 
 ```tsx
 import { useState } from 'react';
-import { ColorArea } from '@cdx-ui/components';
-import { parseColor, type Color } from '@cdx-ui/primitives';
+import { ColorArea, parseColor, type Color } from '@cdx-ui/components';
 
 function requiredColor(value: string): Color {
   const color = parseColor(value);