Export individual types for sheet component props

src/SheetBackdrop.tsx

@@ -2,11 +2,11 @@ import React, { forwardRef } from 'react';
 import { motion } from 'motion/react';
 
 import { type SheetBackdropProps } from './types';
-import styles from './styles';
+import { styles } from './styles';
 
 const isClickable = (props: any) => !!props.onClick || !!props.onTap;
 
-const SheetBackdrop = forwardRef<any, SheetBackdropProps>(
+export const SheetBackdrop = forwardRef<any, SheetBackdropProps>(
   ({ style = {}, className = '', ...rest }, ref) => {
     const Comp = isClickable(rest) ? motion.button : motion.div;
     const pointerEvents = isClickable(rest) ? 'auto' : 'none';
@@ -26,5 +26,3 @@ const SheetBackdrop = forwardRef<any, SheetBackdropProps>(
 );
 
 SheetBackdrop.displayName = 'SheetBackdrop';
-
-export default SheetBackdrop;

src/SheetContainer.tsx

@@ -6,9 +6,9 @@ import { useSheetContext } from './context';
 import { useEventCallbacks } from './hooks';
 import { MAX_HEIGHT } from './constants';
 import { mergeRefs } from './utils';
-import styles from './styles';
+import { styles } from './styles';
 
-const SheetContainer = forwardRef<any, SheetContainerProps>(
+export const SheetContainer = forwardRef<any, SheetContainerProps>(
   ({ children, style = {}, className = '', ...rest }, ref) => {
     const {
       y,
@@ -56,5 +56,3 @@ const SheetContainer = forwardRef<any, SheetContainerProps>(
 );
 
 SheetContainer.displayName = 'SheetContainer';
-
-export default SheetContainer;

src/SheetContent.tsx

@@ -5,9 +5,9 @@ import { type SheetDraggableProps } from './types';
 import { useSheetScrollerContext, useSheetContext } from './context';
 import { useDragConstraints } from './hooks';
 import { mergeRefs } from './utils';
-import styles from './styles';
+import { styles } from './styles';
 
-const SheetContent = forwardRef<any, SheetDraggableProps>(
+export const SheetContent = forwardRef<any, SheetDraggableProps>(
   ({ children, style, disableDrag, className = '', ...rest }, ref) => {
     const sheetContext = useSheetContext();
     const sheetScrollerContext = useSheetScrollerContext();
@@ -35,5 +35,3 @@ const SheetContent = forwardRef<any, SheetDraggableProps>(
 );
 
 SheetContent.displayName = 'SheetContent';
-
-export default SheetContent;

src/SheetHeader.tsx

@@ -5,9 +5,9 @@ import { type SheetDraggableProps } from './types';
 import { useSheetContext } from './context';
 import { useDragConstraints } from './hooks';
 import { mergeRefs } from './utils';
-import styles from './styles';
+import { styles } from './styles';
 
-const SheetHeader = forwardRef<any, SheetDraggableProps>(
+export const SheetHeader = forwardRef<any, SheetDraggableProps>(
   ({ children, style, disableDrag, ...rest }, ref) => {
     const { indicatorRotation, dragProps } = useSheetContext();
     const { constraintsRef, onMeasureDragConstraints } = useDragConstraints();
@@ -50,5 +50,3 @@ const SheetHeader = forwardRef<any, SheetDraggableProps>(
 );
 
 SheetHeader.displayName = 'SheetHeader';
-
-export default SheetHeader;

src/SheetScroller.tsx

@@ -3,9 +3,9 @@ import React, { type TouchEvent, type UIEvent, forwardRef } from 'react';
 import { useSheetScrollerContext } from './context';
 import { type SheetScrollerProps } from './types';
 import { isTouchDevice } from './utils';
-import styles from './styles';
+import { styles } from './styles';
 
-const SheetScroller = forwardRef<any, SheetScrollerProps>(
+export const SheetScroller = forwardRef<any, SheetScrollerProps>(
   ({ draggableAt = 'top', children, style, className = '', ...rest }, ref) => {
     const sheetScrollerContext = useSheetScrollerContext();
 
@@ -63,5 +63,3 @@ const SheetScroller = forwardRef<any, SheetScrollerProps>(
 );
 
 SheetScroller.displayName = 'SheetScroller';
-
-export default SheetScroller;

src/index.tsx

@@ -1,24 +1,32 @@
-import { type MotionValue } from 'motion/react';
+import type { MotionValue } from 'motion/react';
 
-import _Sheet from './sheet';
-import SheetContainer from './SheetContainer';
-import SheetContent from './SheetContent';
-import SheetHeader from './SheetHeader';
-import SheetBackdrop from './SheetBackdrop';
-import SheetScroller from './SheetScroller';
-import { type SheetCompound } from './types';
+import type { SheetCompound, SheetDraggableProps } from './types';
+import { Sheet as SheetBase } from './sheet';
+import { SheetContainer } from './SheetContainer';
+import { SheetContent } from './SheetContent';
+import { SheetHeader } from './SheetHeader';
+import { SheetBackdrop } from './SheetBackdrop';
+import { SheetScroller } from './SheetScroller';
 
 export interface SheetRef {
   y: MotionValue<number>;
   snapTo: (index: number) => void;
 }
 
-// HACK: this is needed to get the typing to work properly...
-const _SheetCompound: any = _Sheet;
-_SheetCompound.Container = SheetContainer;
-_SheetCompound.Header = SheetHeader;
-_SheetCompound.Content = SheetContent;
-_SheetCompound.Backdrop = SheetBackdrop;
-_SheetCompound.Scroller = SheetScroller;
+export const Sheet: SheetCompound = Object.assign(SheetBase, {
+  Container: SheetContainer,
+  Header: SheetHeader,
+  Content: SheetContent,
+  Backdrop: SheetBackdrop,
+  Scroller: SheetScroller,
+});
 
-export const Sheet = _SheetCompound as SheetCompound;
+// Export types
+export type SheetHeaderProps = SheetDraggableProps;
+export type SheetContentProps = SheetDraggableProps;
+export type {
+  SheetProps,
+  SheetBackdropProps,
+  SheetScrollerProps,
+  SheetContainerProps,
+} from './types';

src/sheet.tsx

@@ -40,9 +40,9 @@ import { type SheetContextType, type SheetProps } from './types';
 import { SheetScrollerContextProvider, SheetContext } from './context';
 import { getClosest, inDescendingOrder, validateSnapTo } from './utils';
 import { usePreventScroll } from './use-prevent-scroll';
-import styles from './styles';
+import { styles } from './styles';
 
-const Sheet = forwardRef<any, SheetProps>(
+export const Sheet = forwardRef<any, SheetProps>(
   (
     {
       onOpenStart,
@@ -301,5 +301,3 @@ const Sheet = forwardRef<any, SheetProps>(
 );
 
 Sheet.displayName = 'Sheet';
-
-export default Sheet;

src/styles.ts

@@ -1,6 +1,6 @@
 import { type Properties } from 'csstype';
 
-const styles: Record<string, Properties> = {
+export const styles: Record<string, Properties> = {
   wrapper: {
     position: 'fixed',
     top: 0,
@@ -65,5 +65,3 @@ const styles: Record<string, Properties> = {
     overflowY: 'auto',
   },
 };
-
-export default styles;