@pathscale/ui 0.0.88 → 0.0.89

package/dist/components/bottom-sheet/BottomSheet.d.ts

@@ -0,0 +1,11 @@
+import { Component } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export interface BottomSheetProps extends IComponentBaseProps {
+    isOpen: boolean;
+    onClose: () => void;
+    children?: any;
+    closeOnOverlayClick?: boolean;
+    closeOnSwipeDown?: boolean;
+}
+declare const BottomSheet: Component<BottomSheetProps>;
+export default BottomSheet;

package/dist/components/bottom-sheet/index.d.ts

@@ -0,0 +1,2 @@
+export type { BottomSheetProps } from "./BottomSheet";
+export { default } from "./BottomSheet";

package/dist/index.d.ts

@@ -6,6 +6,8 @@ export { default as Background } from "./components/background";
 export { default as Badge } from "./components/badge";
 export { Breadcrumbs, BreadcrumbsItem } from "./components/breadcrumbs";
 export { default as BrowserMockup, type BrowserMockupProps, } from "./components/browsermockup";
+export { default as BottomSheet } from "./components/bottom-sheet/BottomSheet";
+export type { BottomSheetProps } from "./components/bottom-sheet/BottomSheet";
 export { default as Button } from "./components/button";
 export { default as Calendar, type CalendarProps } from "./components/calendar";
 export { default as Card } from "./components/card";

package/dist/index.js

@@ -4119,6 +4119,110 @@ const BrowserMockup = (props)=>{
     })();
 };
 const browsermockup_BrowserMockup = BrowserMockup;
+var BottomSheet_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>"), BottomSheet_tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div><div class=p-4><div class="w-12 h-1 bg-base-content/30 rounded-full mx-auto mb-4">');
+const BottomSheet = (props)=>{
+    const merged = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.mergeProps)({
+        closeOnOverlayClick: true,
+        closeOnSwipeDown: true
+    }, props);
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(merged, [
+        "isOpen",
+        "onClose",
+        "children",
+        "dataTheme",
+        "class",
+        "className",
+        "style",
+        "closeOnOverlayClick",
+        "closeOnSwipeDown"
+    ]);
+    const [isDragging, setIsDragging] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(false);
+    const [startY, setStartY] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(0);
+    const [currentY, setCurrentY] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(0);
+    let sheetRef;
+    let overlayRef;
+    const handleTouchStart = (e)=>{
+        if (!local.closeOnSwipeDown) return;
+        const touchY = e.touches[0].clientY;
+        const sheetTop = sheetRef?.getBoundingClientRect().top || 0;
+        if (touchY - sheetTop < 50) {
+            setIsDragging(true);
+            setStartY(touchY);
+            setCurrentY(touchY);
+        }
+    };
+    const handleTouchMove = (e)=>{
+        if (!isDragging()) return;
+        const deltaY = e.touches[0].clientY - startY();
+        const newY = Math.max(0, deltaY);
+        setCurrentY(e.touches[0].clientY);
+        if (sheetRef) sheetRef.style.transform = `translateY(${newY}px)`;
+        e.preventDefault();
+    };
+    const handleTouchEnd = ()=>{
+        if (!isDragging()) return;
+        setIsDragging(false);
+        const deltaY = currentY() - startY();
+        if (deltaY > 100) local.onClose();
+        else if (sheetRef) sheetRef.style.transform = "translateY(0)";
+    };
+    const handleOverlayClick = (e)=>{
+        if (local.closeOnOverlayClick && e.target === overlayRef) local.onClose();
+    };
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onMount)(()=>{
+        if (sheetRef && local.closeOnSwipeDown) {
+            sheetRef.addEventListener("touchstart", handleTouchStart, {
+                passive: true
+            });
+            sheetRef.addEventListener("touchmove", handleTouchMove, {
+                passive: false
+            });
+            sheetRef.addEventListener("touchend", handleTouchEnd, {
+                passive: true
+            });
+        }
+    });
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
+        if (sheetRef) {
+            sheetRef.removeEventListener("touchstart", handleTouchStart);
+            sheetRef.removeEventListener("touchmove", handleTouchMove);
+            sheetRef.removeEventListener("touchend", handleTouchEnd);
+        }
+    });
+    return [
+        (()=>{
+            var _el$ = BottomSheet_tmpl$();
+            _el$.$$click = handleOverlayClick;
+            var _ref$ = overlayRef;
+            "function" == typeof _ref$ ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$, _el$) : overlayRef = _el$;
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$, clsx("fixed inset-0 bg-base-100 bg-opacity-60 z-40 transition-opacity duration-200", local.isOpen ? "opacity-100" : "opacity-0 pointer-events-none")));
+            return _el$;
+        })(),
+        (()=>{
+            var _el$2 = BottomSheet_tmpl$2(), _el$3 = _el$2.firstChild;
+            _el$3.firstChild;
+            var _ref$2 = sheetRef;
+            "function" == typeof _ref$2 ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$2, _el$2) : sheetRef = _el$2;
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+                get ["class"] () {
+                    return clsx("bg-base-300 text-base-content fixed bottom-0 left-0 right-0 rounded-t-2xl shadow-lg z-50 transition-transform duration-300 ease-out", local.isOpen ? "translate-y-0" : "translate-y-full");
+                },
+                get style () {
+                    return {
+                        transform: isDragging() ? `translateY(${Math.max(0, currentY() - startY())}px)` : void 0,
+                        ...local.style
+                    };
+                }
+            }, others), false, true);
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, ()=>local.children, null);
+            return _el$2;
+        })()
+    ];
+};
+const bottom_sheet_BottomSheet = BottomSheet;
+(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.delegateEvents)([
+    "click"
+]);
 var Loading_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span>");
 const Loading = (props)=>{
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
@@ -4263,7 +4367,8 @@ const Button = (props)=>{
             "btn-xs sm:btn-sm md:btn-md lg:btn-lg": local.responsive,
             "no-animation": !local.animation,
             "btn-active": local.active,
-            "btn-disabled": local.disabled
+            "btn-disabled": local.disabled,
+            "cursor-not-allowed": local.disabled
         }), local.class, local.className);
     const Tag = local.as || "button";
     if (Button_VoidElementList.includes(Tag)) return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.Dynamic, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
@@ -11915,4 +12020,4 @@ const WindowMockup = (props)=>{
     })();
 };
 const windowmockup_WindowMockup = WindowMockup;
-export { accordion_Accordion as Accordion, alert_Alert as Alert, artboard_Artboard as Artboard, avatar as Avatar, background_Background as Background, Badge, Breadcrumbs, breadcrumbs_BreadcrumbsItem as BreadcrumbsItem, browsermockup_BrowserMockup as BrowserMockup, button_Button as Button, Calendar, card_Card as Card, carousel_Carousel as Carousel, chatbubble_ChatBubble as ChatBubble, checkbox_Checkbox as Checkbox, codemockup_CodeMockup as CodeMockup, CodeMockupLine, collapse_Collapse as Collapse, CollapseContent, CollapseDetails, CollapseTitle, connectionstatus_ConnectionStatus as ConnectionStatus, CopyButton, countdown_Countdown as Countdown, diff_Diff as Diff, divider as Divider, dock as Dock, Drawer, dropdown as Dropdown, FileInput, flex_Flex as Flex, footer_Footer as Footer, form_Form as Form, Grid, hero_Hero as Hero, icon_Icon as Icon, indicator_Indicator as Indicator, input as Input, join_Join as Join, kbd_Kbd as Kbd, link_Link as Link, loading_Loading as Loading, mask as Mask, menu_Menu as Menu, modal_Modal as Modal, navbar_Navbar as Navbar, pagination_Pagination as Pagination, phonemockup_PhoneMockup as PhoneMockup, Progress, props_table_PropsTable as PropsTable, radialprogress_RadialProgress as RadialProgress, radio_Radio as Radio, range_Range as Range, Rating, select_Select as Select, showcase_ShowcaseBlock as ShowcaseBlock, showcase_section_ShowcaseSection as ShowcaseSection, sidenav_Sidenav as Sidenav, sidenav_SidenavButton as SidenavButton, sidenav_SidenavGroup as SidenavGroup, sidenav_SidenavItem as SidenavItem, sidenav_SidenavLink as SidenavLink, sidenav_SidenavMenu as SidenavMenu, skeleton_Skeleton as Skeleton, Stack, stat_card_StatCard as StatCard, stats_Stats as Stats, status_Status as Status, steps as Steps, Summary, SvgBackground, Swap, table_Table as Table, tabs_Tabs as Tabs, textarea_Textarea as Textarea, Timeline, timeline_TimelineEnd as TimelineEnd, timeline_TimelineItem as TimelineItem, timeline_TimelineMiddle as TimelineMiddle, timeline_TimelineStart as TimelineStart, toast_Toast as Toast, ToastContainer, toggle_Toggle as Toggle, tooltip_Tooltip as Tooltip, windowmockup_WindowMockup as WindowMockup, connectionstatus_ConnectionStatus as default, toastStore, useDesktop, useFormValidation };
+export { accordion_Accordion as Accordion, alert_Alert as Alert, artboard_Artboard as Artboard, avatar as Avatar, background_Background as Background, Badge, bottom_sheet_BottomSheet as BottomSheet, Breadcrumbs, breadcrumbs_BreadcrumbsItem as BreadcrumbsItem, browsermockup_BrowserMockup as BrowserMockup, button_Button as Button, Calendar, card_Card as Card, carousel_Carousel as Carousel, chatbubble_ChatBubble as ChatBubble, checkbox_Checkbox as Checkbox, codemockup_CodeMockup as CodeMockup, CodeMockupLine, collapse_Collapse as Collapse, CollapseContent, CollapseDetails, CollapseTitle, connectionstatus_ConnectionStatus as ConnectionStatus, CopyButton, countdown_Countdown as Countdown, diff_Diff as Diff, divider as Divider, dock as Dock, Drawer, dropdown as Dropdown, FileInput, flex_Flex as Flex, footer_Footer as Footer, form_Form as Form, Grid, hero_Hero as Hero, icon_Icon as Icon, indicator_Indicator as Indicator, input as Input, join_Join as Join, kbd_Kbd as Kbd, link_Link as Link, loading_Loading as Loading, mask as Mask, menu_Menu as Menu, modal_Modal as Modal, navbar_Navbar as Navbar, pagination_Pagination as Pagination, phonemockup_PhoneMockup as PhoneMockup, Progress, props_table_PropsTable as PropsTable, radialprogress_RadialProgress as RadialProgress, radio_Radio as Radio, range_Range as Range, Rating, select_Select as Select, showcase_ShowcaseBlock as ShowcaseBlock, showcase_section_ShowcaseSection as ShowcaseSection, sidenav_Sidenav as Sidenav, sidenav_SidenavButton as SidenavButton, sidenav_SidenavGroup as SidenavGroup, sidenav_SidenavItem as SidenavItem, sidenav_SidenavLink as SidenavLink, sidenav_SidenavMenu as SidenavMenu, skeleton_Skeleton as Skeleton, Stack, stat_card_StatCard as StatCard, stats_Stats as Stats, status_Status as Status, steps as Steps, Summary, SvgBackground, Swap, table_Table as Table, tabs_Tabs as Tabs, textarea_Textarea as Textarea, Timeline, timeline_TimelineEnd as TimelineEnd, timeline_TimelineItem as TimelineItem, timeline_TimelineMiddle as TimelineMiddle, timeline_TimelineStart as TimelineStart, toast_Toast as Toast, ToastContainer, toggle_Toggle as Toggle, tooltip_Tooltip as Tooltip, windowmockup_WindowMockup as WindowMockup, connectionstatus_ConnectionStatus as default, toastStore, useDesktop, useFormValidation };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pathscale/ui",
-  "version": "0.0.88",
+  "version": "0.0.89",
   "author": "pathscale",
   "repository": {
     "type": "git",