@cloudvoyant/helical-react 0.19.0 → 0.20.0

package/dist/index.cjs

@@ -675,7 +675,7 @@ function useIsMobile() {
   return isMobile && isMobileSet;
 }
 function Provider({
-  defaultOpen = true,
+  defaultOpen = false,
   open: openProp,
   onOpenChange: setOpenProp,
   className,
@@ -685,6 +685,8 @@ function Provider({
 }) {
   const isMobile = useIsMobile();
   const [openMobile, setOpenMobile] = React2.useState(false);
+  const isControlled = openProp !== void 0;
+  const usesMobileSheetState = isMobile && !isControlled;
   const [_open, _setOpen] = React2.useState(defaultOpen);
   const open = openProp ?? _open;
   const setOpen = React2.useCallback(
@@ -702,8 +704,8 @@ function Provider({
     [setOpenProp, open]
   );
   const toggleSidebar = React2.useCallback(() => {
-    return isMobile ? setOpenMobile((open2) => !open2) : setOpen((open2) => !open2);
-  }, [isMobile, setOpen, setOpenMobile]);
+    return usesMobileSheetState ? setOpenMobile((open2) => !open2) : setOpen((open2) => !open2);
+  }, [usesMobileSheetState, setOpen, setOpenMobile]);
   React2.useEffect(() => {
     if (openProp !== void 0) return;
     if (typeof document === "undefined") return;
@@ -731,9 +733,10 @@ function Provider({
       isMobile,
       openMobile,
       setOpenMobile,
-      toggleSidebar
+      toggleSidebar,
+      isControlled
     }),
-    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar, isControlled]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     Row,
@@ -763,7 +766,7 @@ function Root({
   children,
   ...props
 }) {
-  const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+  const { isMobile, state, open, setOpen, openMobile, setOpenMobile, isControlled } = useSidebar();
   if (collapsible === "none") {
     return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       Col,
@@ -777,27 +780,40 @@ function Root({
     );
   }
   if (isMobile) {
+    const isBottomWidgetSheet = side === "right";
+    const mobileSheetOpen = isControlled ? open : openMobile;
+    const setMobileSheetOpen = isControlled ? setOpen : setOpenMobile;
+    const bottomSheetSnapProps = isBottomWidgetSheet ? {
+      snapPoints: import_helical_ui25.SIDEBAR_WIDGET_SNAP_POINTS,
+      defaultSnapPoint: import_helical_ui25.SIDEBAR_WIDGET_DEFAULT_SNAP_POINT,
+      snapToSequentialPoints: true
+    } : {};
     return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
       import_drawer.DrawerRoot,
       {
-        open: openMobile,
-        onOpenChange: (details) => setOpenMobile(details.open),
+        open: mobileSheetOpen,
+        onOpenChange: (details) => setMobileSheetOpen(details.open),
+        swipeDirection: side === "left" ? "start" : "down",
+        modal: !isBottomWidgetSheet,
+        ...bottomSheetSnapProps,
+        preventDragOnScroll: false,
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_drawer.DrawerBackdrop, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_drawer.DrawerPositioner, { className: "w-(--sidebar-width)", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+          !isBottomWidgetSheet && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_drawer.DrawerBackdrop, { className: import_helical_ui25.sidebarStyles.mobileBackdropClass }),
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_drawer.DrawerPositioner, { className: import_helical_ui25.sidebarStyles.mobilePositionerClass, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
             import_drawer.DrawerContent,
             {
               "data-sidebar": "sidebar",
               "data-slot": "sidebar",
               "data-mobile": "true",
-              className: (0, import_helical_ui25.cn)("w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground", className),
+              className: (0, import_helical_ui25.cn)(import_helical_ui25.sidebarStyles.mobileContentClass, className),
               style: { "--sidebar-width": import_helical_ui25.SIDEBAR_WIDTH_MOBILE },
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_drawer.DrawerTitle, { className: "sr-only", children: "Sidebar" }),
                 /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_drawer.DrawerDescription, { className: "sr-only", children: "Displays the mobile sidebar." }),
                 /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_drawer.DrawerCloseTrigger, { className: "hidden" }),
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Col, { className: "h-full w-full", children })
+                isBottomWidgetSheet && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_drawer.DrawerGrabber, { className: import_helical_ui25.sidebarStyles.mobileGrabberClass, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_drawer.DrawerGrabberIndicator, { className: import_helical_ui25.sidebarStyles.mobileGrabberIndicatorClass }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { "data-no-drag": true, className: "flex min-h-0 flex-1 flex-col", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Col, { className: "h-full w-full", children }) })
               ]
             }
           ) })

package/dist/index.js

@@ -531,7 +531,7 @@ function useIsMobile() {
   return isMobile && isMobileSet;
 }
 function Provider({
-  defaultOpen = true,
+  defaultOpen = false,
   open: openProp,
   onOpenChange: setOpenProp,
   className,
@@ -541,6 +541,8 @@ function Provider({
 }) {
   const isMobile = useIsMobile();
   const [openMobile, setOpenMobile] = React2.useState(false);
+  const isControlled = openProp !== void 0;
+  const usesMobileSheetState = isMobile && !isControlled;
   const [_open, _setOpen] = React2.useState(defaultOpen);
   const open = openProp ?? _open;
   const setOpen = React2.useCallback(
@@ -558,8 +560,8 @@ function Provider({
     [setOpenProp, open]
   );
   const toggleSidebar = React2.useCallback(() => {
-    return isMobile ? setOpenMobile((open2) => !open2) : setOpen((open2) => !open2);
-  }, [isMobile, setOpen, setOpenMobile]);
+    return usesMobileSheetState ? setOpenMobile((open2) => !open2) : setOpen((open2) => !open2);
+  }, [usesMobileSheetState, setOpen, setOpenMobile]);
   React2.useEffect(() => {
     if (openProp !== void 0) return;
     if (typeof document === "undefined") return;
@@ -587,9 +589,10 @@ function Provider({
       isMobile,
       openMobile,
       setOpenMobile,
-      toggleSidebar
+      toggleSidebar,
+      isControlled
     }),
-    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar, isControlled]
   );
   return /* @__PURE__ */ jsx24(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx24(
     Row,
@@ -615,9 +618,17 @@ import {
   DrawerContent,
   DrawerTitle,
   DrawerDescription,
-  DrawerCloseTrigger
+  DrawerCloseTrigger,
+  DrawerGrabber,
+  DrawerGrabberIndicator
 } from "@ark-ui/react/drawer";
-import { SIDEBAR_WIDTH_MOBILE, sidebarStyles as sidebarStyles2, cn as cn25 } from "@cloudvoyant/helical-ui";
+import {
+  SIDEBAR_WIDTH_MOBILE,
+  SIDEBAR_WIDGET_SNAP_POINTS,
+  SIDEBAR_WIDGET_DEFAULT_SNAP_POINT,
+  sidebarStyles as sidebarStyles2,
+  cn as cn25
+} from "@cloudvoyant/helical-ui";
 import { jsx as jsx25, jsxs as jsxs5 } from "react/jsx-runtime";
 function Root({
   side = "left",
@@ -627,7 +638,7 @@ function Root({
   children,
   ...props
 }) {
-  const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+  const { isMobile, state, open, setOpen, openMobile, setOpenMobile, isControlled } = useSidebar();
   if (collapsible === "none") {
     return /* @__PURE__ */ jsx25(
       Col,
@@ -641,27 +652,40 @@ function Root({
     );
   }
   if (isMobile) {
+    const isBottomWidgetSheet = side === "right";
+    const mobileSheetOpen = isControlled ? open : openMobile;
+    const setMobileSheetOpen = isControlled ? setOpen : setOpenMobile;
+    const bottomSheetSnapProps = isBottomWidgetSheet ? {
+      snapPoints: SIDEBAR_WIDGET_SNAP_POINTS,
+      defaultSnapPoint: SIDEBAR_WIDGET_DEFAULT_SNAP_POINT,
+      snapToSequentialPoints: true
+    } : {};
     return /* @__PURE__ */ jsxs5(
       DrawerRoot,
       {
-        open: openMobile,
-        onOpenChange: (details) => setOpenMobile(details.open),
+        open: mobileSheetOpen,
+        onOpenChange: (details) => setMobileSheetOpen(details.open),
+        swipeDirection: side === "left" ? "start" : "down",
+        modal: !isBottomWidgetSheet,
+        ...bottomSheetSnapProps,
+        preventDragOnScroll: false,
         ...props,
         children: [
-          /* @__PURE__ */ jsx25(DrawerBackdrop, {}),
-          /* @__PURE__ */ jsx25(DrawerPositioner, { className: "w-(--sidebar-width)", children: /* @__PURE__ */ jsxs5(
+          !isBottomWidgetSheet && /* @__PURE__ */ jsx25(DrawerBackdrop, { className: sidebarStyles2.mobileBackdropClass }),
+          /* @__PURE__ */ jsx25(DrawerPositioner, { className: sidebarStyles2.mobilePositionerClass, children: /* @__PURE__ */ jsxs5(
             DrawerContent,
             {
               "data-sidebar": "sidebar",
               "data-slot": "sidebar",
               "data-mobile": "true",
-              className: cn25("w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground", className),
+              className: cn25(sidebarStyles2.mobileContentClass, className),
               style: { "--sidebar-width": SIDEBAR_WIDTH_MOBILE },
               children: [
                 /* @__PURE__ */ jsx25(DrawerTitle, { className: "sr-only", children: "Sidebar" }),
                 /* @__PURE__ */ jsx25(DrawerDescription, { className: "sr-only", children: "Displays the mobile sidebar." }),
                 /* @__PURE__ */ jsx25(DrawerCloseTrigger, { className: "hidden" }),
-                /* @__PURE__ */ jsx25(Col, { className: "h-full w-full", children })
+                isBottomWidgetSheet && /* @__PURE__ */ jsx25(DrawerGrabber, { className: sidebarStyles2.mobileGrabberClass, children: /* @__PURE__ */ jsx25(DrawerGrabberIndicator, { className: sidebarStyles2.mobileGrabberIndicatorClass }) }),
+                /* @__PURE__ */ jsx25("div", { "data-no-drag": true, className: "flex min-h-0 flex-1 flex-col", children: /* @__PURE__ */ jsx25(Col, { className: "h-full w-full", children }) })
               ]
             }
           ) })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudvoyant/helical-react",
-  "version": "0.19.0",
+  "version": "0.20.0",
   "description": "helical-ui React UI components",
   "license": "MIT",
   "type": "module",
@@ -46,7 +46,7 @@
     "@tiptap/react": "^3.31.3",
     "@tiptap/suggestion": "^3.31.3",
     "lucide-react": "^1.32.0",
-    "@cloudvoyant/helical-ui": "0.19.0"
+    "@cloudvoyant/helical-ui": "0.20.0"
   },
   "devDependencies": {
     "@types/katex": "^0.16.8",