@nation-a/ui 0.11.1 → 0.11.3

package/dist/styled-system/styles.css

@@ -999,64 +999,68 @@ html:not(#\#),body:not(#\#) {
   gap: 10px;
 }
 
-.pos_fixed:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
-  position: fixed;
+.p_0:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  padding: var(--spacing-0);
 }
 
-.tch-a_pan-y:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
-  touch-action: pan-y;
+.p_5:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  padding: var(--spacing-5);
 }
 
-.w_100\%:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
-  width: 100%;
+.bd_5px_solid_red:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  border: 5px solid red;
 }
 
-.pointer-events_auto:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
-  pointer-events: auto;
+.gap_15:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  gap: 15px;
 }
 
-.ov_hidden:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
-  overflow: hidden;
+.bd_1px_solid_red:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  border: 1px solid red;
 }
 
-.bdr_40px_40px_0_0:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
-  border-radius: 40px 40px 0 0;
+.c_white:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  color: white;
 }
 
-.h_100\%:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
-  height: 100%;
+.bx-sh_md:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  box-shadow: md;
 }
 
-.z_modal:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
-  z-index: var(--z-index-modal);
-}
-
-.bx-sh_0_-15px_15px_0px_rgba\(0\,_0\,_0\,_0\.05\):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
-  box-shadow: 0 -15px 15px 0px rgba(0, 0, 0, 0.05);
+.bg_surface\.layer_1:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  background: var(--colors-surface-layer_1);
 }
 
-.will-change_auto:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
-  will-change: auto;
+.h_100\%:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  height: 100%;
 }
 
-.z_overlay:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
-  z-index: var(--z-index-overlay);
+.p_4:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  padding: var(--spacing-4);
 }
 
-.h_100dvh:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
-  height: 100dvh;
+.bd-b_none:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  border-bottom: var(--borders-none);
 }
 
-.will-change_opacity:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
-  will-change: opacity;
+.z_0:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  z-index: 0;
 }
 
 .tch-a_none:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
   touch-action: none;
 }
 
-.m_22px_auto:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
-  margin: 22px auto;
+.bx-sh_overlay:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  box-shadow: var(--shadows-overlay);
+}
+
+.op_0\.5:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  opacity: 0.5;
+}
+
+.m_15px_auto:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  margin: 15px auto;
 }
 
 .h_1\.5:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
@@ -1079,6 +1083,11 @@ html:not(#\#),body:not(#\#) {
   background: #bebebe;
 }
 
+.us_none:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  -webkit-user-select: none;
+  user-select: none;
+}
+
 .ap_none:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
   appearance: none;
   -webkit-appearance: none;
@@ -1108,11 +1117,6 @@ html:not(#\#),body:not(#\#) {
   position: relative;
 }
 
-.us_none:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
-  -webkit-user-select: none;
-  user-select: none;
-}
-
 .va_middle:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
   vertical-align: middle;
 }
@@ -1269,6 +1273,10 @@ html:not(#\#),body:not(#\#) {
   pointer-events: none;
 }
 
+.pointer-events_auto:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  pointer-events: auto;
+}
+
 .pos_absolute:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
   position: absolute;
 }
@@ -1302,16 +1310,24 @@ html:not(#\#),body:not(#\#) {
   background: var(--colors-shadow-overlay);
 }
 
+.pos_fixed:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  position: fixed;
+}
+
 .w_100vw:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
   width: 100vw;
 }
 
+.z_overlay:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  z-index: var(--z-index-overlay);
+}
+
 .ov_auto:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
   overflow: auto;
 }
 
-.p_4:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
-  padding: var(--spacing-4);
+.z_modal:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  z-index: var(--z-index-modal);
 }
 
 .min-w_xs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
@@ -1346,6 +1362,10 @@ html:not(#\#),body:not(#\#) {
   padding: 8px;
 }
 
+.w_100\%:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  width: 100%;
+}
+
 .cursor_text:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
   cursor: text;
 }
@@ -1410,10 +1430,6 @@ html:not(#\#),body:not(#\#) {
   color: var(--colors-content-neutral-subtlest);
 }
 
-.bg_surface\.layer_1:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
-  background: var(--colors-surface-layer_1);
-}
-
 .z_10:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
   z-index: 10;
 }
@@ -1516,6 +1532,10 @@ html:not(#\#),body:not(#\#) {
   flex: 1 1 0%;
 }
 
+.ov_hidden:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  overflow: hidden;
+}
+
 .tov_ellipsis:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
   text-overflow: ellipsis;
 }
@@ -1612,10 +1632,6 @@ html:not(#\#),body:not(#\#) {
   color: var(--colors-content-neutral-inverse-bold);
 }
 
-.bx-sh_overlay:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
-  box-shadow: var(--shadows-overlay);
-}
-
 .anim_fadeIn_0\.25s_ease-out:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
   animation: fadeIn 0.25s ease-out;
 }
@@ -1964,16 +1980,28 @@ html:not(#\#),body:not(#\#) {
   row-gap: var(--spacing-10);
 }
 
-.bg-c_surface\.layer_1:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
-  background-color: var(--colors-surface-layer_1);
+.bg-c_skyblue:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  background-color: skyblue;
 }
 
-.top_0:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
-  top: var(--spacing-0);
+.bdr-tl_20:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  border-top-left-radius: 20px;
 }
 
-.ov-y_auto:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
-  overflow-y: auto;
+.bdr-tr_20:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  border-top-right-radius: 20px;
+}
+
+.fw_bold:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  font-weight: var(--font-weights-bold);
+}
+
+.bg-c_surface\.layer_1:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  background-color: var(--colors-surface-layer_1);
+}
+
+.bg-c_shadow\.overlay:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  background-color: var(--colors-shadow-overlay);
 }
 
 .fw_semibold:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
@@ -2043,6 +2071,10 @@ html:not(#\#),body:not(#\#) {
   top: 50%;
 }
 
+.top_0:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  top: var(--spacing-0);
+}
+
 .left_0:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
   left: var(--spacing-0);
 }
@@ -2219,6 +2251,10 @@ html:not(#\#),body:not(#\#) {
   gap: var(--spacing-10);
 }
 
+.\[\&_\[data-rsbs-backdrop\]\]\:bg_rgba\(0\,_0\,_0\,_0\.6\):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [data-rsbs-backdrop] {
+  background: rgba(0, 0, 0, 0.6);
+}
+
 .hidden\:d_none:is([hidden]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
   display: none;
 }

package/dist/types/components/BottomSheet/BottomSheet.stories.d.ts

@@ -4,3 +4,8 @@ declare const meta: Meta<typeof BottomSheet>;
 export default meta;
 type Story = StoryObj<BottomSheetProps>;
 export declare const Basic: Story;
+export declare const WithoutHandle: Story;
+export declare const CustomRounded: Story;
+export declare const WithoutDefaultPadding: Story;
+export declare const CustomDesignWithScroller: Story;
+export declare const DisableBackdropBlocking: Story;

package/dist/types/components/BottomSheet/bottomsheet.recipe.d.ts

@@ -0,0 +1,11 @@
+import { RecipeVariantProps } from '../../../styled-system/css';
+export type BottomSheetVariantProps = RecipeVariantProps<typeof bottomSheetRecipe>;
+export declare const bottomSheetRecipe: import('../../../styled-system/types').SlotRecipeRuntimeFn<"header" | "content" | "container" | "backdrop" | "root", {
+    fullHeight: {
+        true: {
+            container: {
+                height: "100%";
+            };
+        };
+    };
+}>;

package/dist/types/components/BottomSheet/index.d.ts

@@ -1,42 +1,36 @@
-import { Styles } from '../../../styled-system/css';
-import { CSSProperties, ReactNode } from 'react';
-export interface BottomSheetProps {
-    isOpen: boolean;
-    /**
-     * onClose: 바텀시트 close시 callback
-     */
-    onClose?: () => void;
-    /**
-     * onOpen: 바텀시트 open시 callback
-     */
-    onOpen?: () => void;
+import { ComponentProps, ReactNode } from 'react';
+import { Sheet } from './src';
+import { BottomSheetVariantProps } from './bottomsheet.recipe';
+import { HTMLStyledProps } from '../../../styled-system/jsx';
+export type BottomSheetProps = Omit<ComponentProps<typeof Sheet>, 'children'> & BottomSheetVariantProps & {
     children: ReactNode;
-    className?: string;
-    css?: Styles;
-    style?: CSSProperties;
-    /**
-     * snapPercent: window 높이 기준 바텀시트 최소 / 최대 스냅 퍼센트 (default: min: DEFAULT_MIN_SNAP, max: DEFAULT_MIN_SNAP)
-     */
     snapPercent?: {
-        min?: number;
-        max?: number;
+        min: number;
+        max: number;
     };
-    /**
-     * bgBlocking: 바텀시트 열림시 배경 블락킹 여부 설정 (true(default), false)
-     */
-    bgBlocking?: boolean;
-    /**
-     * backdropOpacity: 바텀시트 열림시 배경 블락킹 backdrop opacity 설정 (0 ~ 1 사이 소수 값, default: DEFAULT_BACKDROP_OPACITY)
-     */
-    backdropOpacity?: number;
-    /**
-     * hideHandle: 바텀시트 핸들 숨기기 설정 (true, false(default))
-     */
-    hideHandle?: boolean;
-    /**
-     * expendOnContentDrag: 컨텐츠 스크롤 시 바텀시트 드래깅 여부 설정 (true, false(default))
-     */
-    expendOnContentDrag?: boolean;
+    rounded?: number;
+    onClose?: () => void;
+};
+interface BottomSheetComponent extends React.ForwardRefExoticComponent<BottomSheetProps & React.RefAttributes<HTMLDivElement>> {
+    Header: typeof Header;
+    Content: typeof Content;
+    Backdrop: typeof Backdrop;
+    Handle: typeof Handle;
+    Scroller: typeof Sheet.Scroller;
 }
-declare const BottomSheet: (props: BottomSheetProps) => import("react/jsx-runtime").JSX.Element;
+declare const BottomSheet: BottomSheetComponent;
+declare const Header: import('react').ForwardRefExoticComponent<{
+    fullHeight?: boolean | undefined;
+} & {
+    children: ReactNode;
+    className?: string;
+} & import('react').RefAttributes<HTMLDivElement>>;
+type ContentProps = ComponentProps<typeof Sheet.Content> & HTMLStyledProps<'div'>;
+declare const Content: import('react').ForwardRefExoticComponent<Omit<ContentProps, "ref"> & import('react').RefAttributes<HTMLStyledProps<"div">>>;
+type BackdropProps = ComponentProps<typeof Sheet.Backdrop> & {
+    opacity?: number;
+    disableCloseOnTap?: boolean;
+};
+declare const Backdrop: import('react').ForwardRefExoticComponent<Omit<BackdropProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+declare const Handle: () => import("react/jsx-runtime").JSX.Element;
 export default BottomSheet;

package/dist/types/components/BottomSheet/src/SheetBackdrop.d.ts

@@ -0,0 +1,2 @@
+import { SheetBackdropProps } from './types';
+export declare const SheetBackdrop: import('react').ForwardRefExoticComponent<SheetBackdropProps & import('react').RefAttributes<any>>;

package/dist/types/components/BottomSheet/src/SheetContainer.d.ts

@@ -0,0 +1,5 @@
+export declare const SheetContainer: import('react').ForwardRefExoticComponent<Omit<import('motion/react').MotionProps & {
+    className?: string;
+}, "animate" | "initial" | "exit" | "onAnimationComplete"> & {
+    children: import('react').ReactNode;
+} & import('react').RefAttributes<any>>;

package/dist/types/components/BottomSheet/src/SheetContent.d.ts

@@ -0,0 +1,6 @@
+export declare const SheetContent: import('react').ForwardRefExoticComponent<Omit<import('motion/react').MotionProps & {
+    className?: string;
+}, "onDrag" | "onDragEnd" | "onDragStart" | "drag" | "dragConstraints" | "dragElastic" | "dragMomentum"> & {
+    children?: import('react').ReactNode;
+    disableDrag?: boolean;
+} & import('react').RefAttributes<any>>;

package/dist/types/components/BottomSheet/src/SheetHeader.d.ts

@@ -0,0 +1,6 @@
+export declare const SheetHeader: import('react').ForwardRefExoticComponent<Omit<import('motion/react').MotionProps & {
+    className?: string;
+}, "onDrag" | "onDragEnd" | "onDragStart" | "drag" | "dragConstraints" | "dragElastic" | "dragMomentum"> & {
+    children?: import('react').ReactNode;
+    disableDrag?: boolean;
+} & import('react').RefAttributes<any>>;

package/dist/types/components/BottomSheet/src/SheetScroller.d.ts

@@ -0,0 +1,3 @@
+export declare const SheetScroller: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & {
+    draggableAt?: "top" | "bottom" | "both";
+} & import('react').RefAttributes<any>>;

package/dist/types/components/BottomSheet/src/constants.d.ts

@@ -0,0 +1,12 @@
+export declare const MAX_HEIGHT = "calc(100% - env(safe-area-inset-top))";
+export declare const IS_SSR: boolean;
+export declare const DEFAULT_TWEEN_CONFIG: {
+    ease: string;
+    duration: number;
+};
+export declare const REDUCED_MOTION_TWEEN_CONFIG: {
+    ease: string;
+    duration: number;
+};
+export declare const DEFAULT_DRAG_CLOSE_THRESHOLD = 0.6;
+export declare const DEFAULT_DRAG_VELOCITY_THRESHOLD = 500;

package/dist/types/components/BottomSheet/src/context.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+import { SheetScrollerContextType, SheetContextType } from './types';
+export declare const SheetContext: import('react').Context<SheetContextType | undefined>;
+export declare const useSheetContext: () => SheetContextType;
+export declare const SheetScrollerContext: import('react').Context<SheetScrollerContextType | undefined>;
+export declare function SheetScrollerContextProvider({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare const useSheetScrollerContext: () => SheetScrollerContextType;

package/dist/types/components/BottomSheet/src/hooks.d.ts

@@ -0,0 +1,22 @@
+import { RefObject, useEffect } from 'react';
+import { MotionValue, BoundingBox } from 'motion/react';
+import { SheetEvents } from './types';
+export declare const useIsomorphicLayoutEffect: typeof useEffect;
+export declare function useModalEffect({ y, rootId, sheetRef, }: {
+    y: MotionValue<number>;
+    rootId?: string;
+    sheetRef: RefObject<HTMLDivElement | null>;
+}): void;
+export declare function useEventCallbacks(isOpen: boolean, callbacks: RefObject<SheetEvents>): {
+    handleAnimationComplete: () => void;
+};
+export declare function useDimensions(): {
+    height: number;
+    width: number;
+};
+export declare function usePrevious<T>(state: T): T | undefined;
+export declare function useEffectEvent<T extends (...args: any[]) => any>(handler: T): T;
+export declare function useDragConstraints(): {
+    constraintsRef: import('react').MutableRefObject<any>;
+    onMeasureDragConstraints: () => BoundingBox;
+};

package/dist/types/components/BottomSheet/src/index.d.ts

@@ -0,0 +1,10 @@
+import { MotionValue } from 'motion/react';
+import { SheetCompound, SheetDraggableProps } from './types';
+export interface SheetRef {
+    y: MotionValue<number>;
+    snapTo: (index: number) => void;
+}
+export declare const Sheet: SheetCompound;
+export type SheetHeaderProps = SheetDraggableProps;
+export type SheetContentProps = SheetDraggableProps;
+export type { SheetProps, SheetBackdropProps, SheetScrollerProps, SheetContainerProps, } from './types';

package/dist/types/components/BottomSheet/src/sheet.d.ts

@@ -0,0 +1,16 @@
+export declare const Sheet: import('react').ForwardRefExoticComponent<{
+    isOpen: boolean;
+    children: import('react').ReactNode;
+    onClose: () => void;
+    rootId?: string;
+    mountPoint?: Element;
+    snapPoints?: number[];
+    detent?: import('./types').SheetDetent;
+    initialSnap?: number;
+    tweenConfig?: import('./types').SheetTweenConfig;
+    disableDrag?: boolean;
+    disableScrollLocking?: boolean;
+    prefersReducedMotion?: boolean;
+    dragVelocityThreshold?: number;
+    dragCloseThreshold?: number;
+} & import('./types').SheetEvents & Omit<Omit<import('motion/react').HTMLMotionProps<"div">, "ref"> & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<any>>;

package/dist/types/components/BottomSheet/src/styles.d.ts

@@ -0,0 +1,2 @@
+import { Properties } from 'csstype';
+export declare const styles: Record<string, Properties>;

package/dist/types/components/BottomSheet/src/types.d.ts

@@ -0,0 +1,87 @@
+import { ComponentPropsWithoutRef, ForwardRefExoticComponent, HTMLAttributes, MutableRefObject, ReactNode, RefAttributes } from 'react';
+import { DragHandlers, MotionValue, MotionProps, motion, EasingDefinition, Transition } from 'motion/react';
+export interface SheetEvents {
+    onOpenStart?: () => void;
+    onOpenEnd?: () => void;
+    onCloseStart?: () => void;
+    onCloseEnd?: () => void;
+    onSnap?: (index: number) => void;
+}
+export type SheetDetent = 'full-height' | 'content-height';
+type CommonProps = MotionProps & {
+    className?: string;
+};
+export interface SheetTweenConfig {
+    ease: EasingDefinition;
+    duration: number;
+}
+export type SheetProps = {
+    isOpen: boolean;
+    children: ReactNode;
+    onClose: () => void;
+    rootId?: string;
+    mountPoint?: Element;
+    snapPoints?: number[];
+    detent?: SheetDetent;
+    initialSnap?: number;
+    tweenConfig?: SheetTweenConfig;
+    disableDrag?: boolean;
+    disableScrollLocking?: boolean;
+    prefersReducedMotion?: boolean;
+    dragVelocityThreshold?: number;
+    dragCloseThreshold?: number;
+} & SheetEvents & ComponentPropsWithoutRef<typeof motion.div>;
+export type SheetContainerProps = Omit<CommonProps, 'initial' | 'animate' | 'exit' | 'onAnimationComplete'> & {
+    children: ReactNode;
+};
+export type SheetDraggableProps = Omit<CommonProps, 'drag' | 'dragElastic' | 'dragConstraints' | 'dragMomentum' | 'onDrag' | 'onDragStart' | 'onDragEnd'> & {
+    children?: ReactNode;
+    disableDrag?: boolean;
+};
+export type SheetBackdropProps = Omit<CommonProps, 'initial' | 'animate' | 'exit'>;
+export type SheetScrollerProps = HTMLAttributes<HTMLDivElement> & {
+    draggableAt?: 'top' | 'bottom' | 'both';
+};
+export interface SheetDragProps {
+    drag: 'y';
+    dragElastic: number;
+    dragMomentum: boolean;
+    dragPropagation: boolean;
+    onDrag: DragHandlers['onDrag'];
+    onDragStart: DragHandlers['onDragStart'];
+    onDragEnd: DragHandlers['onDragEnd'];
+}
+export interface SheetContextType {
+    y: MotionValue<any>;
+    sheetRef: MutableRefObject<any>;
+    isOpen: boolean;
+    snapPoints: SheetProps['snapPoints'];
+    detent: SheetDetent;
+    initialSnap: SheetProps['initialSnap'];
+    indicatorRotation: MotionValue<number>;
+    callbacks: MutableRefObject<SheetEvents>;
+    dragProps?: SheetDragProps;
+    windowHeight: number;
+    animationOptions: Transition;
+    reduceMotion: boolean;
+    disableDrag: boolean;
+}
+export interface SheetScrollerContextType {
+    disableDrag: boolean;
+    setDragDisabled: () => void;
+    setDragEnabled: () => void;
+}
+type ContainerComponent = ForwardRefExoticComponent<SheetContainerProps & RefAttributes<any>>;
+type DraggableComponent = ForwardRefExoticComponent<SheetDraggableProps & RefAttributes<any>>;
+type BackdropComponent = ForwardRefExoticComponent<SheetBackdropProps & RefAttributes<any>>;
+type SheetComponent = ForwardRefExoticComponent<SheetProps & RefAttributes<any>>;
+type ScrollerComponent = ForwardRefExoticComponent<SheetScrollerProps & RefAttributes<any>>;
+interface SheetCompoundComponent {
+    Container: ContainerComponent;
+    Header: DraggableComponent;
+    Content: DraggableComponent;
+    Backdrop: BackdropComponent;
+    Scroller: ScrollerComponent;
+}
+export type SheetCompound = SheetComponent & SheetCompoundComponent;
+export {};

package/dist/types/components/BottomSheet/src/use-prevent-scroll.d.ts

@@ -0,0 +1,13 @@
+interface PreventScrollOptions {
+    /** Whether the scroll lock is disabled. */
+    isDisabled?: boolean;
+}
+export declare function isScrollable(node: Element | null, checkForOverflow?: boolean): boolean;
+export declare function getScrollParent(node: Element, checkForOverflow?: boolean): Element;
+/**
+ * Prevents scrolling on the document body on mount, and
+ * restores it on unmount. Also ensures that content does not
+ * shift due to the scrollbars disappearing.
+ */
+export declare function usePreventScroll(options?: PreventScrollOptions): void;
+export {};

package/dist/types/components/BottomSheet/src/utils.d.ts

@@ -0,0 +1,10 @@
+import { ForwardedRef, RefCallback } from 'react';
+export declare function getClosest(nums: number[], goal: number): number;
+export declare function inDescendingOrder(arr: number[]): boolean;
+export declare function validateSnapTo({ snapTo, sheetHeight, }: {
+    snapTo: number;
+    sheetHeight: number;
+}): number;
+export declare function mergeRefs<T = any>(refs: ForwardedRef<T>[]): RefCallback<T>;
+export declare function isTouchDevice(): boolean;
+export declare const isIOS: () => boolean;

package/dist/types/components/Navigation/navigation.recipe.d.ts

@@ -1,3 +1,3 @@
 import { RecipeVariantProps } from '../../../styled-system/css';
 export type NavigationVariantProps = RecipeVariantProps<typeof navigationRecipe>;
-export declare const navigationRecipe: import('../../../styled-system/types').SlotRecipeRuntimeFn<"list" | "content" | "trigger" | "root" | "indicator", import('../../../styled-system/types').SlotRecipeVariantRecord<"list" | "content" | "trigger" | "root" | "indicator">>;
+export declare const navigationRecipe: import('../../../styled-system/types').SlotRecipeRuntimeFn<"list" | "content" | "trigger" | "indicator" | "root", import('../../../styled-system/types').SlotRecipeVariantRecord<"list" | "content" | "trigger" | "indicator" | "root">>;

package/dist/types/components/Tabs/tabs.recipe.d.ts

@@ -1,6 +1,6 @@
 import { RecipeVariantProps } from '../../../styled-system/css';
 export type TabsVariantProps = RecipeVariantProps<typeof tabsRecipe>;
-export declare const tabsRecipe: import('../../../styled-system/types').SlotRecipeRuntimeFn<"list" | "content" | "trigger" | "root" | "indicator", {
+export declare const tabsRecipe: import('../../../styled-system/types').SlotRecipeRuntimeFn<"list" | "content" | "trigger" | "indicator" | "root", {
     variant: {
         line: {
             list: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nation-a/ui",
-  "version": "0.11.1",
+  "version": "0.11.3",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -14,6 +14,8 @@
   "dependencies": {
     "@ark-ui/react": "^5.1.0",
     "@react-spring/web": "^9.7.5",
+    "csstype": "^3.1.3",
+    "motion": "^12.6.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "@nation-a/icons": "0.2.0",