@nation-a/ui 0.11.1 → 0.11.2

package/dist/styled-system/styles.css

@@ -1079,6 +1079,67 @@ html:not(#\#),body:not(#\#) {
   background: #bebebe;
 }
 
+.p_0:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  padding: var(--spacing-0);
+}
+
+.p_5:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  padding: var(--spacing-5);
+}
+
+.bd_5px_solid_red:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  border: 5px solid red;
+}
+
+.gap_15:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  gap: 15px;
+}
+
+.bd_1px_solid_red:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  border: 1px solid red;
+}
+
+.c_white:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  color: white;
+}
+
+.bx-sh_md:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  box-shadow: md;
+}
+
+.bg_surface\.layer_1:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  background: var(--colors-surface-layer_1);
+}
+
+.p_4:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  padding: var(--spacing-4);
+}
+
+.bd-b_none:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  border-bottom: var(--borders-none);
+}
+
+.z_0:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  z-index: 0;
+}
+
+.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;
+}
+
+.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 +1169,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;
 }
@@ -1310,10 +1366,6 @@ html:not(#\#),body:not(#\#) {
   overflow: auto;
 }
 
-.p_4:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
-  padding: var(--spacing-4);
-}
-
 .min-w_xs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
   min-width: var(--sizes-xs);
 }
@@ -1410,10 +1462,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;
 }
@@ -1612,10 +1660,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;
 }
@@ -1976,6 +2020,26 @@ html:not(#\#),body:not(#\#) {
   overflow-y: auto;
 }
 
+.bg-c_skyblue:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  background-color: skyblue;
+}
+
+.bdr-tl_20:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  border-top-left-radius: 20px;
+}
+
+.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_shadow\.overlay:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  background-color: var(--colors-shadow-overlay);
+}
+
 .fw_semibold:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
   font-weight: var(--font-weights-semibold);
 }
@@ -2219,6 +2283,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/BottomSheet2/BottomSheet.stories.d.ts

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { default as BottomSheet, BottomSheetProps } from '.';
+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/BottomSheet2/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/BottomSheet2/index.d.ts

@@ -0,0 +1,38 @@
+import { ComponentProps, ReactNode } from 'react';
+import { Sheet } from 'react-modal-sheet';
+import { BottomSheetVariantProps } from './bottomsheet.recipe';
+import { HTMLStyledProps } from '../../../styled-system/jsx';
+export type BottomSheetProps = Omit<ComponentProps<typeof Sheet>, 'children'> & BottomSheetVariantProps & {
+    children: ReactNode;
+    snapPercent?: {
+        min: number;
+        max: number;
+    };
+    fullHeight?: boolean;
+    rounded?: number;
+    disableDrag?: boolean;
+    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: 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/index.d.ts

@@ -3,7 +3,7 @@ export { default as Text, type TextProps } from './Text';
 export { default as Dialog, type DialogProps } from './Dialog';
 export { default as Spinner, type SpinnerProps } from './Spinner';
 export { default as IconButton, type IconButtonProps } from './IconButton';
-export { default as BottomSheet, type BottomSheetProps } from './BottomSheet';
+export { default as BottomSheet, type BottomSheetProps } from './BottomSheet2';
 export { default as Navigation, type NavigationProps, type NavigationTriggerProps } from './Navigation';
 export { default as Tag, type TagProps } from './Tag';
 export { Portal, type PortalProps } from '@ark-ui/react';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nation-a/ui",
-  "version": "0.11.1",
+  "version": "0.11.2",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -14,8 +14,10 @@
   "dependencies": {
     "@ark-ui/react": "^5.1.0",
     "@react-spring/web": "^9.7.5",
+    "motion": "^12.6.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-modal-sheet": "^4.0.1",
     "@nation-a/icons": "0.2.0",
     "@nation-a/tokens": "0.2.1"
   },