@cdx-ui/components 0.2.4 → 0.3.0

package/lib/typescript/components/Calendar/styles.d.ts

@@ -8,8 +8,14 @@ export declare const calendarMonthHeaderLabelVariants: (props?: ({
 export declare const calendarMonthHeaderIconVariants: (props?: ({
     isYearView?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-export declare const calendarMonthHeaderNavVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const calendarMonthHeaderNavVariants: (props?: ({
+    hidden?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const calendarYearPickerGridVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const calendarYearPickerListVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const calendarYearPickerListContentVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const calendarYearPickerRowVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const calendarYearPickerPlaceholderVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const calendarPillCellVariants: (props?: ({
     selected?: boolean | null | undefined;
     disabled?: boolean | null | undefined;

package/lib/typescript/components/Calendar/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Calendar/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,eAAe,CAAC;AAGvD,eAAO,MAAM,oBAAoB,oFAI/B,CAAC;AAEH,eAAO,MAAM,2BAA2B,oFAA0D,CAAC;AAEnG,eAAO,MAAM,iCAAiC,oFAAoD,CAAC;AAEnG,eAAO,MAAM,gCAAgC;;8EAQ3C,CAAC;AAEH,eAAO,MAAM,+BAA+B;;8EAQ1C,CAAC;AAEH,eAAO,MAAM,8BAA8B,oFAAqC,CAAC;AAEjF,eAAO,MAAM,8BAA8B,oFAE1C,CAAC;AAEF,eAAO,MAAM,wBAAwB;;;8EAwBpC,CAAC;AAEF,eAAO,MAAM,4BAA4B;;8EAQvC,CAAC;AAEH,MAAM,MAAM,wBAAwB,GAAG,YAAY,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACjF,MAAM,MAAM,oCAAoC,GAAG,YAAY,CAC7D,OAAO,gCAAgC,CACxC,CAAC;AACF,MAAM,MAAM,4BAA4B,GAAG,YAAY,CAAC,OAAO,wBAAwB,CAAC,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Calendar/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,eAAe,CAAC;AAGvD,eAAO,MAAM,oBAAoB,oFAI/B,CAAC;AAEH,eAAO,MAAM,2BAA2B,oFAA0D,CAAC;AAEnG,eAAO,MAAM,iCAAiC,oFAAoD,CAAC;AAEnG,eAAO,MAAM,gCAAgC;;8EAQ3C,CAAC;AAEH,eAAO,MAAM,+BAA+B;;8EAQ1C,CAAC;AAEH,eAAO,MAAM,8BAA8B;;8EAQzC,CAAC;AAEH,eAAO,MAAM,8BAA8B,oFAE1C,CAAC;AAEF,eAAO,MAAM,8BAA8B,oFAAgB,CAAC;AAE5D,eAAO,MAAM,qCAAqC,oFAAc,CAAC;AAEjE,eAAO,MAAM,6BAA6B,oFAA+C,CAAC;AAE1F,eAAO,MAAM,qCAAqC,oFAAiB,CAAC;AAEpE,eAAO,MAAM,wBAAwB;;;8EAwBpC,CAAC;AAEF,eAAO,MAAM,4BAA4B;;8EAQvC,CAAC;AAEH,MAAM,MAAM,wBAAwB,GAAG,YAAY,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACjF,MAAM,MAAM,oCAAoC,GAAG,YAAY,CAC7D,OAAO,gCAAgC,CACxC,CAAC;AACF,MAAM,MAAM,4BAA4B,GAAG,YAAY,CAAC,OAAO,wBAAwB,CAAC,CAAC"}

package/lib/typescript/components/MonthCalendar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/MonthCalendar/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAoC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACzE,OAAO,EAAmB,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AACrE,OAAO,EAOL,KAAK,sBAAsB,EAC5B,MAAM,oBAAoB,CAAC;AAyB5B,MAAM,WAAW,kBACf,SAAQ,IAAI,CAAC,sBAAsB,EAAE,UAAU,CAAC,EAAE,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IAC7E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAWD,QAAA,MAAM,iBAAiB,qGAYtB,CAAC;AAIF,QAAA,MAAM,mBAAmB,4FAqEvB,CAAC;AAIH,QAAA,MAAM,iBAAiB,4FAqCrB,CAAC;AAIH,QAAA,MAAM,iBAAiB;WAEZ,MAAM;gBAAc,MAAM;eAAa,SAAS;wCAwBzD,CAAC;AAIH,QAAA,MAAM,qBAAqB;UAEjB,MAAM;gBAAc,MAAM;eAAa,SAAS;wCAuBxD,CAAC;AAIH,KAAK,qBAAqB,GAAG,OAAO,iBAAiB,GAAG;IACtD,MAAM,EAAE,OAAO,mBAAmB,CAAC;IACnC,IAAI,EAAE,OAAO,iBAAiB,CAAC;IAC/B,IAAI,EAAE,OAAO,iBAAiB,CAAC;IAC/B,QAAQ,EAAE,OAAO,qBAAqB,CAAC;CACxC,CAAC;AAEF,eAAO,MAAM,aAAa,EAKpB,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/MonthCalendar/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC1E,OAAO,EAAmB,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AACrE,OAAO,EAOL,KAAK,sBAAsB,EAC5B,MAAM,oBAAoB,CAAC;AAkC5B,MAAM,WAAW,kBACf,SAAQ,IAAI,CAAC,sBAAsB,EAAE,UAAU,CAAC,EAAE,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IAC7E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAWD,QAAA,MAAM,iBAAiB,qGAYtB,CAAC;AAIF,QAAA,MAAM,mBAAmB,4FA4EvB,CAAC;AAIH,QAAA,MAAM,iBAAiB,4FA2CrB,CAAC;AAIH,QAAA,MAAM,iBAAiB;WAEZ,MAAM;gBAAc,MAAM;eAAa,SAAS;wCAwBzD,CAAC;AAIH,QAAA,MAAM,qBAAqB;UAEjB,MAAM;gBAAc,MAAM;eAAa,SAAS;wCAuBxD,CAAC;AAIH,KAAK,qBAAqB,GAAG,OAAO,iBAAiB,GAAG;IACtD,MAAM,EAAE,OAAO,mBAAmB,CAAC;IACnC,IAAI,EAAE,OAAO,iBAAiB,CAAC;IAC/B,IAAI,EAAE,OAAO,iBAAiB,CAAC;IAC/B,QAAQ,EAAE,OAAO,qBAAqB,CAAC;CACxC,CAAC;AAEF,eAAO,MAAM,aAAa,EAKpB,qBAAqB,CAAC"}

package/lib/typescript/components/RangeCalendar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/RangeCalendar/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA2C,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAChF,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpD,OAAO,EAKL,KAAK,sBAAsB,EAC5B,MAAM,oBAAoB,CAAC;AAa5B,MAAM,WAAW,kBACf,SAAQ,IAAI,CAAC,sBAAsB,EAAE,UAAU,CAAC,EAAE,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IAC7E,mFAAmF;IACnF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAYD,QAAA,MAAM,iBAAiB,qGAYtB,CAAC;AAIF,QAAA,MAAM,mBAAmB,4FAkBvB,CAAC;AAIH,QAAA,MAAM,uBAAuB,4FAiB5B,CAAC;AAIF,QAAA,MAAM,iBAAiB,4FAkDrB,CAAC;AAIH,KAAK,qBAAqB,GAAG,OAAO,iBAAiB,GAAG;IACtD,MAAM,EAAE,OAAO,mBAAmB,CAAC;IACnC,IAAI,EAAE,OAAO,iBAAiB,CAAC;IAC/B,UAAU,EAAE,OAAO,uBAAuB,CAAC;CAC5C,CAAC;AAEF,eAAO,MAAM,aAAa,EAIpB,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/RangeCalendar/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA2C,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAChF,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpD,OAAO,EAKL,KAAK,sBAAsB,EAC5B,MAAM,oBAAoB,CAAC;AAe5B,MAAM,WAAW,kBACf,SAAQ,IAAI,CAAC,sBAAsB,EAAE,UAAU,CAAC,EAAE,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IAC7E,mFAAmF;IACnF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAYD,QAAA,MAAM,iBAAiB,qGAYtB,CAAC;AAIF,QAAA,MAAM,mBAAmB,4FAkBvB,CAAC;AAIH,QAAA,MAAM,uBAAuB,4FAoB5B,CAAC;AAIF,QAAA,MAAM,iBAAiB,4FAkDrB,CAAC;AAIH,KAAK,qBAAqB,GAAG,OAAO,iBAAiB,GAAG;IACtD,MAAM,EAAE,OAAO,mBAAmB,CAAC;IACnC,IAAI,EAAE,OAAO,iBAAiB,CAAC;IAC/B,UAAU,EAAE,OAAO,uBAAuB,CAAC;CAC5C,CAAC;AAEF,eAAO,MAAM,aAAa,EAIpB,qBAAqB,CAAC"}

package/lib/typescript/components/Stack/HStack.d.ts

@@ -1,6 +1,7 @@
-import { View, type ViewProps } from 'react-native';
+import type { View } from 'react-native';
+import { type BoxProps } from '../Box';
 import { type StackSpace } from './styles';
-export interface HStackProps extends ViewProps {
+export interface HStackProps extends Omit<BoxProps, 'asChild'> {
     className?: string;
     /** Token-based gap between children. */
     space?: StackSpace;

package/lib/typescript/components/Stack/HStack.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HStack.d.ts","sourceRoot":"","sources":["../../../../src/components/Stack/HStack.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpD,OAAO,EAAsB,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AAE/D,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wCAAwC;IACxC,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,MAAM,8FAgBlB,CAAC"}
+{"version":3,"file":"HStack.d.ts","sourceRoot":"","sources":["../../../../src/components/Stack/HStack.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAGzC,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAC5C,OAAO,EAAsB,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AAE/D,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,QAAQ,EAAE,SAAS,CAAC;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wCAAwC;IACxC,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,MAAM,8FAkBlB,CAAC"}

package/lib/typescript/components/Stack/VStack.d.ts

@@ -1,6 +1,7 @@
-import { View, type ViewProps } from 'react-native';
+import type { View } from 'react-native';
+import { type BoxProps } from '../Box';
 import { type StackSpace } from './styles';
-export interface VStackProps extends ViewProps {
+export interface VStackProps extends Omit<BoxProps, 'asChild'> {
     className?: string;
     /** Token-based gap between children. */
     space?: StackSpace;

package/lib/typescript/components/Stack/VStack.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VStack.d.ts","sourceRoot":"","sources":["../../../../src/components/Stack/VStack.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpD,OAAO,EAAsB,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AAE/D,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wCAAwC;IACxC,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,MAAM,8FAgBlB,CAAC"}
+{"version":3,"file":"VStack.d.ts","sourceRoot":"","sources":["../../../../src/components/Stack/VStack.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAGzC,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAC5C,OAAO,EAAsB,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AAE/D,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,QAAQ,EAAE,SAAS,CAAC;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wCAAwC;IACxC,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,MAAM,8FAkBlB,CAAC"}

package/lib/typescript/components/Toast/animation.d.ts

@@ -1,9 +1,9 @@
 import { Gesture } from 'react-native-gesture-handler';
-import { EntryOrExitLayoutType, useAnimatedStyle } from 'react-native-reanimated';
+import { EntryOrExitLayoutType, FadeInDown, FadeInUp, useAnimatedStyle } from 'react-native-reanimated';
 import type { UseToastRootAnimationOptions } from './types';
-export declare const enteringTop: import("react-native-reanimated").ComplexAnimationBuilder;
+export declare const enteringTop: FadeInUp;
 export declare const exitingTop: import("react-native-reanimated").ReanimatedKeyframe;
-export declare const enteringBottom: import("react-native-reanimated").ComplexAnimationBuilder;
+export declare const enteringBottom: FadeInDown;
 export declare const exitingBottom: import("react-native-reanimated").ReanimatedKeyframe;
 export interface UseToastRootAnimationResult {
     rContainerStyle: ReturnType<typeof useAnimatedStyle>;

package/lib/typescript/components/Toast/animation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"animation.d.ts","sourceRoot":"","sources":["../../../../src/components/Toast/animation.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAC;AACvD,OAAO,EAEL,qBAAqB,EAMrB,gBAAgB,EAKjB,MAAM,yBAAyB,CAAC;AASjC,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,SAAS,CAAC;AAI5D,eAAO,MAAM,WAAW,2DAKd,CAAC;AAEX,eAAO,MAAM,UAAU,sDAUP,CAAC;AAEjB,eAAO,MAAM,cAAc,2DAKjB,CAAC;AAEX,eAAO,MAAM,aAAa,sDAUV,CAAC;AAEjB,MAAM,WAAW,2BAA2B;IAC1C,eAAe,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;IACrD,uBAAuB,EAAE,OAAO,CAAC;IACjC,QAAQ,EAAE,qBAAqB,GAAG,SAAS,CAAC;IAC5C,OAAO,EAAE,qBAAqB,GAAG,SAAS,CAAC;IAC3C,UAAU,EAAE,UAAU,CAAC,OAAO,OAAO,CAAC,GAAG,CAAC,CAAC;CAC5C;AAID;;;;GAIG;AACH,wBAAgB,qBAAqB,CACnC,OAAO,EAAE,4BAA4B,GACpC,2BAA2B,CAiU7B"}
+{"version":3,"file":"animation.d.ts","sourceRoot":"","sources":["../../../../src/components/Toast/animation.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAC;AACvD,OAAO,EAEL,qBAAqB,EAErB,UAAU,EACV,QAAQ,EAGR,gBAAgB,EAKjB,MAAM,yBAAyB,CAAC;AASjC,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,SAAS,CAAC;AAI5D,eAAO,MAAM,WAAW,UAKd,CAAC;AAEX,eAAO,MAAM,UAAU,sDAUP,CAAC;AAEjB,eAAO,MAAM,cAAc,YAKjB,CAAC;AAEX,eAAO,MAAM,aAAa,sDAUV,CAAC;AAEjB,MAAM,WAAW,2BAA2B;IAC1C,eAAe,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;IACrD,uBAAuB,EAAE,OAAO,CAAC;IACjC,QAAQ,EAAE,qBAAqB,GAAG,SAAS,CAAC;IAC5C,OAAO,EAAE,qBAAqB,GAAG,SAAS,CAAC;IAC3C,UAAU,EAAE,UAAU,CAAC,OAAO,OAAO,CAAC,GAAG,CAAC,CAAC;CAC5C;AAID;;;;GAIG;AACH,wBAAgB,qBAAqB,CACnC,OAAO,EAAE,4BAA4B,GACpC,2BAA2B,CAiU7B"}

package/lib/typescript/components/ToggleButton/styles.d.ts

@@ -12,7 +12,7 @@ export declare const toggleButtonRootVariants: (props?: ({
  */
 export declare const toggleButtonAttachedVariants: (props?: ({
     orientation?: "vertical" | "horizontal" | null | undefined;
-    position?: "middle" | "first" | "only" | "last" | null | undefined;
+    position?: "middle" | "first" | "last" | "only" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type ToggleButtonAttachedPosition = NonNullable<VariantProps<typeof toggleButtonAttachedVariants>['position']>;
 export declare const toggleButtonGroupVariants: (props?: ({

package/lib/typescript/index.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="uniwind/types" preserve="true" />
+import { View as RNView } from 'react-native';
 export * from './components';
 export * from './hooks';
 export * from './navigation';
@@ -6,6 +7,10 @@ export { ToastProvider, useToast } from './providers/toast';
 export type * from './providers/toast';
 export { ForgeDesignProvider } from './providers/forge-design';
 export type { ForgeDesignConfig, ForgeDesignProviderProps } from './providers/forge-design';
-export { View, ScrollView, KeyboardAvoidingView } from 'react-native';
+export { ScrollView, KeyboardAvoidingView } from 'react-native';
 export { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
+/** @deprecated Use `Box` instead. */
+export declare const View: typeof RNView;
+/** @deprecated Use `BoxRef` for refs and `BoxProps` for props instead. */
+export type View = RNView;
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";AACA,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,mBAAmB,mBAAmB,CAAC;AACvC,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC/D,YAAY,EAAE,iBAAiB,EAAE,wBAAwB,EAAE,MAAM,0BAA0B,CAAC;AAC5F,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AACtE,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,IAAI,IAAI,MAAM,EAAE,MAAM,cAAc,CAAC;AAE9C,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,mBAAmB,mBAAmB,CAAC;AACvC,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC/D,YAAY,EAAE,iBAAiB,EAAE,wBAAwB,EAAE,MAAM,0BAA0B,CAAC;AAC5F,OAAO,EAAE,UAAU,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAChE,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAEjF,qCAAqC;AACrC,eAAO,MAAM,IAAI,eAAS,CAAC;AAC3B,0EAA0E;AAC1E,MAAM,MAAM,IAAI,GAAG,MAAM,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdx-ui/components",
-  "version": "0.2.4",
+  "version": "0.3.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -106,20 +106,20 @@
     "@marceloterreiro/flash-calendar": "2.0.0",
     "react-native-reanimated-carousel": "5.0.0-beta.5",
     "uniwind": "1.10.0",
-    "@cdx-ui/formatters": "0.2.4",
-    "@cdx-ui/primitives": "0.2.4",
-    "@cdx-ui/icons": "0.2.4",
-    "@cdx-ui/utils": "0.2.4"
+    "@cdx-ui/icons": "0.3.0",
+    "@cdx-ui/primitives": "0.3.0",
+    "@cdx-ui/formatters": "0.3.0",
+    "@cdx-ui/utils": "0.3.0"
   },
   "devDependencies": {
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",
     "@react-navigation/bottom-tabs": "*",
-    "@types/react": "19.1.17",
+    "@types/react": "19.2.14",
     "@types/react-dom": "*",
-    "react": "19.1.0",
-    "react-dom": "19.1.0",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
     "react-native": "*",
     "react-native-builder-bob": "*",
     "react-native-screens": "*",

package/src/components/BottomSheet/index.tsx

@@ -5,6 +5,7 @@ import React, {
   useEffect,
   useId,
   useImperativeHandle,
+  useMemo,
   useRef,
   useState,
   type ReactNode,
@@ -25,15 +26,21 @@ import {
   type BottomSheetModalProps as GorhomBottomSheetModalProps,
 } from '@gorhom/bottom-sheet';
 import { useEscapeKey, useOverlayStackRegistration } from '@cdx-ui/primitives';
-import { cn } from '@cdx-ui/utils';
+import { cn, ParentContext, useParentContext, useStyleContext } from '@cdx-ui/utils';
 import { SheetHeader } from '../sheet-header';
 import {
   bottomSheetBackgroundClassName,
   bottomSheetContentVariants,
   bottomSheetFooterVariants,
   bottomSheetModalContainerClassName,
+  type BottomSheetContentVariantProps,
 } from './styles';
 
+const SCOPE = 'BOTTOM_SHEET';
+
+const useBottomSheetStyleContext = () =>
+  (useStyleContext(SCOPE) ?? {}) as BottomSheetContentVariantProps;
+
 const ZERO_INSETS: EdgeInsets = { top: 0, bottom: 0, left: 0, right: 0 };
 
 function useSafeInsets(): EdgeInsets {
@@ -100,13 +107,19 @@ export interface BottomSheetContentProps {
   className?: string;
   /** Adds bottom padding equal to the safe-area inset. */
   hasSafeAreaInset?: boolean;
+  /** Removes horizontal padding. Inherits the parent `BottomSheet.Modal`'s `fullBleed` when omitted. */
+  fullBleed?: BottomSheetContentVariantProps['fullBleed'];
   style?: ViewStyle;
 }
 
 const BottomSheetContent = forwardRef<View, BottomSheetContentProps>(
-  ({ children, className, hasSafeAreaInset, style }, ref) => {
+  ({ children, className, hasSafeAreaInset, fullBleed, style }, ref) => {
     const insets = useSafeInsets();
-    const computedClassName = cn(bottomSheetContentVariants(), className);
+    const { fullBleed: fullBleedFromContext } = useBottomSheetStyleContext();
+    const computedClassName = cn(
+      bottomSheetContentVariants({ fullBleed: fullBleed ?? fullBleedFromContext }),
+      className,
+    );
     return (
       <View
         ref={ref}
@@ -162,6 +175,11 @@ export interface BottomSheetModalProps extends GorhomBottomSheetModalProps {
    * Pass it through this prop; a footer placed as a child does not animate with the sheet.
    */
   footer?: ReactNode;
+  /**
+   * 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.
+   */
+  fullBleed?: BottomSheetContentVariantProps['fullBleed'];
 }
 
 const MAX_DYNAMIC_CONTENT_SIZE = Dimensions.get('window').height * 0.9;
@@ -185,151 +203,169 @@ const CustomBackground = (props: React.ComponentPropsWithoutRef<typeof View>) =>
 const BottomSheetModalStyled = forwardRef<
   React.ComponentRef<typeof BottomSheetModal>,
   BottomSheetModalProps
->(({ handleVisible = true, footer, onDismiss, onChange, onAnimate, ...rest }, ref) => {
-  const renderFooter = useCallback(
-    (props: GorhomBottomSheetFooterProps) => (
-      <GorhomBottomSheetFooter {...props}>{footer}</GorhomBottomSheetFooter>
-    ),
-    [footer],
-  );
-
-  const modalRef = useRef<BottomSheetModalRef | null>(null);
-  const dismissedRef = useRef(false);
-  const sheetMountedRef = useRef(false);
-  const mountPendingRef = useRef(false);
-  const pendingDismissRef = useRef<Parameters<BottomSheetModalRef['dismiss']> | null>(null);
-  const [presented, setPresented] = useState(false);
-
-  // Must stay a callback ref: gorhom hands this ref to its modal provider, which
-  // reads `.current` to minimize and restore stacked sheets. A ref object would
-  // switch that stacking on.
-  const setModalRef = useCallback((instance: BottomSheetModalRef | null) => {
-    modalRef.current = instance;
-  }, []);
-
-  // gorhom mounts the sheet a frame after `present()` and silently drops a
-  // `dismiss()` that arrives before then, never reporting `onDismiss`. Holding
-  // it until the sheet mounts keeps the early Escape/back claim releasable.
-  const dismissSheet = useCallback((...args: Parameters<BottomSheetModalRef['dismiss']>) => {
-    if (mountPendingRef.current) {
-      pendingDismissRef.current = args;
-      return;
-    }
-    modalRef.current?.dismiss(...args);
-  }, []);
+>(
+  (
+    { handleVisible = true, footer, fullBleed, children, onDismiss, onChange, onAnimate, ...rest },
+    ref,
+  ) => {
+    const parent = useParentContext();
+    const ctx = useMemo(() => ({ ...parent, [SCOPE]: { fullBleed } }), [parent, fullBleed]);
+
+    const renderFooter = useCallback(
+      (props: GorhomBottomSheetFooterProps) => (
+        <GorhomBottomSheetFooter {...props}>{footer}</GorhomBottomSheetFooter>
+      ),
+      [footer],
+    );
 
-  const markSheetMounted = useCallback(() => {
-    sheetMountedRef.current = true;
-    if (!mountPendingRef.current) return;
-    mountPendingRef.current = false;
-    const pendingDismiss = pendingDismissRef.current;
-    pendingDismissRef.current = null;
-    if (pendingDismiss) modalRef.current?.dismiss(...pendingDismiss);
-  }, []);
+    const modalRef = useRef<BottomSheetModalRef | null>(null);
+    const dismissedRef = useRef(false);
+    const sheetMountedRef = useRef(false);
+    const mountPendingRef = useRef(false);
+    const pendingDismissRef = useRef<Parameters<BottomSheetModalRef['dismiss']> | null>(null);
+    const [presented, setPresented] = useState(false);
+
+    // Must stay a callback ref: gorhom hands this ref to its modal provider, which
+    // reads `.current` to minimize and restore stacked sheets. A ref object would
+    // switch that stacking on.
+    const setModalRef = useCallback((instance: BottomSheetModalRef | null) => {
+      modalRef.current = instance;
+    }, []);
+
+    // gorhom mounts the sheet a frame after `present()` and silently drops a
+    // `dismiss()` that arrives before then, never reporting `onDismiss`. Holding
+    // it until the sheet mounts keeps the early Escape/back claim releasable.
+    const dismissSheet = useCallback((...args: Parameters<BottomSheetModalRef['dismiss']>) => {
+      if (mountPendingRef.current) {
+        pendingDismissRef.current = args;
+        return;
+      }
+      modalRef.current?.dismiss(...args);
+    }, []);
+
+    const markSheetMounted = useCallback(() => {
+      sheetMountedRef.current = true;
+      if (!mountPendingRef.current) return;
+      mountPendingRef.current = false;
+      const pendingDismiss = pendingDismissRef.current;
+      pendingDismissRef.current = null;
+      if (pendingDismiss) modalRef.current?.dismiss(...pendingDismiss);
+    }, []);
+
+    // `present()` claims Escape and back immediately; waiting for the first
+    // `onChange` would leave the overlay beneath in charge for the whole open animation.
+    useImperativeHandle(
+      ref,
+      (): BottomSheetModalRef => ({
+        present: (...args) => {
+          dismissedRef.current = false;
+          if (!sheetMountedRef.current) mountPendingRef.current = true;
+          setPresented(true);
+          modalRef.current?.present(...args);
+        },
+        dismiss: dismissSheet,
+        snapToIndex: (...args) => modalRef.current?.snapToIndex(...args),
+        snapToPosition: (...args) => modalRef.current?.snapToPosition(...args),
+        expand: (...args) => modalRef.current?.expand(...args),
+        collapse: (...args) => modalRef.current?.collapse(...args),
+        close: (...args) => modalRef.current?.close(...args),
+        forceClose: (...args) => modalRef.current?.forceClose(...args),
+      }),
+      [dismissSheet],
+    );
 
-  // `present()` claims Escape and back immediately; waiting for the first
-  // `onChange` would leave the overlay beneath in charge for the whole open animation.
-  useImperativeHandle(
-    ref,
-    (): BottomSheetModalRef => ({
-      present: (...args) => {
+    const handleDismiss = useCallback(() => {
+      sheetMountedRef.current = false;
+      mountPendingRef.current = false;
+      pendingDismissRef.current = null;
+      setPresented(false);
+      if (dismissedRef.current) return;
+      dismissedRef.current = true;
+      onDismiss?.();
+    }, [onDismiss]);
+
+    const handleChange = useCallback(
+      (...args: Parameters<NonNullable<BottomSheetModalProps['onChange']>>) => {
         dismissedRef.current = false;
-        if (!sheetMountedRef.current) mountPendingRef.current = true;
-        setPresented(true);
-        modalRef.current?.present(...args);
+        setPresented(args[0] >= 0);
+        if (args[0] >= 0) markSheetMounted();
+        onChange?.(...args);
       },
-      dismiss: dismissSheet,
-      snapToIndex: (...args) => modalRef.current?.snapToIndex(...args),
-      snapToPosition: (...args) => modalRef.current?.snapToPosition(...args),
-      expand: (...args) => modalRef.current?.expand(...args),
-      collapse: (...args) => modalRef.current?.collapse(...args),
-      close: (...args) => modalRef.current?.close(...args),
-      forceClose: (...args) => modalRef.current?.forceClose(...args),
-    }),
-    [dismissSheet],
-  );
-
-  const handleDismiss = useCallback(() => {
-    sheetMountedRef.current = false;
-    mountPendingRef.current = false;
-    pendingDismissRef.current = null;
-    setPresented(false);
-    if (dismissedRef.current) return;
-    dismissedRef.current = true;
-    onDismiss?.();
-  }, [onDismiss]);
-
-  const handleChange = useCallback(
-    (...args: Parameters<NonNullable<BottomSheetModalProps['onChange']>>) => {
-      dismissedRef.current = false;
-      setPresented(args[0] >= 0);
-      if (args[0] >= 0) markSheetMounted();
-      onChange?.(...args);
-    },
-    [markSheetMounted, onChange],
-  );
+      [markSheetMounted, onChange],
+    );
 
-  const handleAnimate = useCallback(
-    (...args: Parameters<NonNullable<BottomSheetModalProps['onAnimate']>>) => {
-      if (args[1] >= 0) markSheetMounted();
-      onAnimate?.(...args);
-    },
-    [markSheetMounted, onAnimate],
-  );
+    const handleAnimate = useCallback(
+      (...args: Parameters<NonNullable<BottomSheetModalProps['onAnimate']>>) => {
+        if (args[1] >= 0) markSheetMounted();
+        onAnimate?.(...args);
+      },
+      [markSheetMounted, onAnimate],
+    );
 
-  const id = useId();
-  const overlayId = `bottom-sheet-${id}`;
-  useEscapeKey(presented, dismissSheet, {
-    id: overlayId,
-    groupId: overlayId,
-    layer: 'modal',
-  });
-  const { isTopmost } = useOverlayStackRegistration({
-    active: presented && Platform.OS !== 'web',
-    capabilities: ['back'],
-    id: overlayId,
-    groupId: overlayId,
-    layer: 'modal',
-  });
-
-  useEffect(() => {
-    // BackHandler is native-only; react-native-web warns on every subscription.
-    if (!presented || Platform.OS === 'web') return;
-
-    const backHandler = BackHandler.addEventListener('hardwareBackPress', () => {
-      if (!isTopmost('back')) return false;
-      dismissSheet();
-      return true;
+    const id = useId();
+    const overlayId = `bottom-sheet-${id}`;
+    useEscapeKey(presented, dismissSheet, {
+      id: overlayId,
+      groupId: overlayId,
+      layer: 'modal',
+    });
+    const { isTopmost } = useOverlayStackRegistration({
+      active: presented && Platform.OS !== 'web',
+      capabilities: ['back'],
+      id: overlayId,
+      groupId: overlayId,
+      layer: 'modal',
     });
 
-    return () => {
-      backHandler.remove();
-    };
-  }, [dismissSheet, isTopmost, presented]);
+    useEffect(() => {
+      // BackHandler is native-only; react-native-web warns on every subscription.
+      if (!presented || Platform.OS === 'web') return;
 
-  const sheetContainerStyle = useResolveClassNames(bottomSheetModalContainerClassName);
-  const handleIndicatorStyle = useResolveClassNames(
-    'bg-surface-neutral-subtle w-9 h-[5px] rounded-full',
-  );
+      const backHandler = BackHandler.addEventListener('hardwareBackPress', () => {
+        if (!isTopmost('back')) return false;
+        dismissSheet();
+        return true;
+      });
 
-  return (
-    <BottomSheetModal
-      ref={setModalRef}
-      enableDynamicSizing
-      maxDynamicContentSize={MAX_DYNAMIC_CONTENT_SIZE}
-      style={sheetContainerStyle}
-      handleComponent={handleVisible ? undefined : null}
-      handleIndicatorStyle={handleVisible ? handleIndicatorStyle : undefined}
-      backdropComponent={CustomBackdrop}
-      backgroundComponent={CustomBackground}
-      {...rest}
-      onDismiss={handleDismiss}
-      onChange={handleChange}
-      onAnimate={handleAnimate}
-      {...(footer != null && { footerComponent: renderFooter })}
-    />
-  );
-});
+      return () => {
+        backHandler.remove();
+      };
+    }, [dismissSheet, isTopmost, presented]);
+
+    const sheetContainerStyle = useResolveClassNames(bottomSheetModalContainerClassName);
+    const handleIndicatorStyle = useResolveClassNames(
+      'bg-surface-neutral-subtle w-9 h-[5px] rounded-full',
+    );
+
+    return (
+      <BottomSheetModal
+        ref={setModalRef}
+        enableDynamicSizing
+        maxDynamicContentSize={MAX_DYNAMIC_CONTENT_SIZE}
+        style={sheetContainerStyle}
+        handleComponent={handleVisible ? undefined : null}
+        handleIndicatorStyle={handleVisible ? handleIndicatorStyle : undefined}
+        backdropComponent={CustomBackdrop}
+        backgroundComponent={CustomBackground}
+        {...rest}
+        onDismiss={handleDismiss}
+        onChange={handleChange}
+        onAnimate={handleAnimate}
+        {...(footer != null && { footerComponent: renderFooter })}
+      >
+        {typeof children === 'function' ? (
+          (props: { data?: unknown }) => (
+            <ParentContext.Provider value={ctx}>
+              {children(props) as ReactNode}
+            </ParentContext.Provider>
+          )
+        ) : (
+          <ParentContext.Provider value={ctx}>{children}</ParentContext.Provider>
+        )}
+      </BottomSheetModal>
+    );
+  },
+);
 
 BottomSheetModalStyled.displayName = 'BottomSheet.Modal';
 

package/src/components/BottomSheet/styles.ts

@@ -1,4 +1,4 @@
-import { cva } from '@cdx-ui/utils';
+import { cva, type VariantProps } from '@cdx-ui/utils';
 
 /** Keep gorhom's animated container unclipped so web transforms can settle correctly. */
 export const bottomSheetModalContainerClassName = 'rounded-t-4xl';
@@ -6,6 +6,14 @@ export const bottomSheetModalContainerClassName = 'rounded-t-4xl';
 /** Clip the static background for rounded corners without clipping the animated sheet. */
 export const bottomSheetBackgroundClassName = `${bottomSheetModalContainerClassName} overflow-hidden bg-surface-primary`;
 
-export const bottomSheetContentVariants = cva(['bg-surface-primary', 'px-5 pb-5 gap-3']);
+export const bottomSheetContentVariants = cva(['bg-surface-primary', 'px-4 pb-4 gap-3'], {
+  variants: {
+    fullBleed: {
+      true: 'px-0',
+    },
+  },
+});
 
-export const bottomSheetFooterVariants = cva(['px-5 pb-5 gap-2', 'bg-surface-primary']);
+export type BottomSheetContentVariantProps = VariantProps<typeof bottomSheetContentVariants>;
+
+export const bottomSheetFooterVariants = cva(['px-4 pb-5 gap-2', 'bg-surface-primary']);

package/src/components/Box/Box.tsx

@@ -1,16 +1,30 @@
 import { type ForwardedRef, forwardRef } from 'react';
 import { View, type ViewProps } from 'react-native';
+import { Slot, dataAttributes, mergeDataAttributes } from '@cdx-ui/primitives';
 
 export interface BoxProps extends ViewProps {
   className?: string;
+  /** Renders the child element in place of the default `View`, merging Box's props onto it. */
+  asChild?: boolean;
 }
 
-export const Box = forwardRef<View, BoxProps>(
-  ({ children, ...restProps }, ref: ForwardedRef<View>) => {
+/** The instance type of a `Box` ref, e.g. `useRef<BoxRef>(null)`. */
+export type BoxRef = View;
+
+export const Box = forwardRef<BoxRef, BoxProps>(
+  ({ asChild, children, ...restProps }, ref: ForwardedRef<BoxRef>) => {
+    const Comp = asChild ? Slot : View;
+
     return (
-      <View ref={ref} {...restProps}>
+      <Comp
+        ref={ref}
+        {...restProps}
+        // Caller-supplied data attributes win so components composed on Box
+        // (HStack, VStack and their consumers) can replace the default slot.
+        {...mergeDataAttributes(dataAttributes({ slot: 'box' }), restProps)}
+      >
         {children}
-      </View>
+      </Comp>
     );
   },
 );