@cdx-ui/components 0.2.4 → 0.3.0

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}>
@@ -259,6 +261,7 @@ export default function BottomSheetHandleHiddenDemo() {
 | --- | --- | --- | --- |
 | `handleVisible?` | `boolean` | `true` | Show the drag handle indicator. When false, `handleComponent` is set to null. |
 | `footer?` | `React.ReactNode` | — | Footer content rendered via gorhom's BottomSheetFooter for animated positioning and safe-area handling. Pass it through this prop; a footer placed as a child does not animate with the sheet. |
+| `fullBleed?` | `boolean \| null` | — | Removes `BottomSheet.Content`'s horizontal padding so content can span the sheet edge to edge. `BottomSheet.Content` inherits this unless it sets its own `fullBleed`. The footer keeps its padding. |
 
 Also accepts all props from `@gorhom/bottom-sheet`'s `BottomSheetModal` including `snapPoints`, `enableDynamicSizing`, `onDismiss`, and `onChange`.
 
@@ -282,6 +285,7 @@ Also accepts all props from `@gorhom/bottom-sheet`'s `BottomSheetModal` includin
 | `children?` | `React.ReactNode` | — | — |
 | `className?` | `string` | — | — |
 | `hasSafeAreaInset?` | `boolean` | — | Adds bottom padding equal to the safe-area inset. |
+| `fullBleed?` | `boolean \| null` | — | Removes horizontal padding. Inherits the parent `BottomSheet.Modal`'s `fullBleed` when omitted. |
 | `style?` | `ViewStyle` | — | — |
 
 ### BottomSheet.Footer

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/calendar/content.md

@@ -33,7 +33,7 @@ export default function CalendarBasicDemo() {
 
 ## Date limits
 
-Set `minValue` and `maxValue` to restrict which days can be selected.
+Set `minValue` and `maxValue` to restrict which days can be selected. The bounds also set the year picker's range: it lists every year from the `minValue` year to the `maxValue` year and scrolls to the visible year when it opens.
 
 ```tsx
 import { useState } from 'react';
@@ -57,6 +57,28 @@ export default function CalendarMinMaxDemo() {
 }
 ```
 
+With a bound unset, the year picker extends 100 years from today on that side. For a date of birth, set `maxValue` to today and leave `minValue` unset to reach any year in the past century.
+
+```tsx
+import { useState } from 'react';
+import { Calendar } from '@cdx-ui/components';
+import { todayDateId, type DateId } from '@cdx-ui/formatters';
+
+export default function CalendarDateOfBirthDemo() {
+  const [value, setValue] = useState<DateId | undefined>();
+
+  return (
+    <Calendar
+      value={value}
+      onValueChange={setValue}
+      maxValue={todayDateId()}
+      aria-label="Date of birth"
+      className="w-full max-w-sm"
+    />
+  );
+}
+```
+
 ## Unavailable dates
 
 Pass `isDateUnavailable` to disable individual days — here, weekends and a holiday list for business-days-only payments.
@@ -109,6 +131,8 @@ export default function CalendarDisabledDemo() {
 
 By default, `Calendar` renders a month header with previous/next navigation and a year drill-down, followed by the day grid. `locale` defaults to `en-US` and controls weekday and month formatting.
 
+The year drill-down replaces the day grid with a scrolling list of years at the same height. It lists the years from `minValue` to `maxValue`; a side with no bound extends 100 years before or after the current year. Selecting a year keeps the visible month, moved inside the bounds when the chosen year is a boundary year, and returns to the day grid. `isDateUnavailable` does not hide years.
+
 `isDateUnavailable` combines with `minValue` and `maxValue`: a day is selectable only when it is inside the bounds and the predicate returns `false`. The predicate runs for every day of the visible month; define it outside the component or memoize it so that check is skipped on renders that do not change it.
 
 | Prop | Type | Default | Description |

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. |