@lmy54321/design-system 1.1.0 → 1.1.2

package/dist/index.d.mts

@@ -256,8 +256,11 @@ interface DraggablePanelProps {
     topToolbar?: TopToolbarProps;
     showTopToolbarInStates?: number[];
     bottomBar?: React__default.ReactNode;
+    customSmallHeight?: number;
+    customMediumHeight?: number;
+    bottomOffset?: number;
 }
-declare function DraggablePanel({ children, className, state: controlledState, onStateChange, fullScreenContent, fullScreenTrigger, topToolbar, showTopToolbarInStates, bottomBar }: DraggablePanelProps): react_jsx_runtime.JSX.Element;
+declare function DraggablePanel({ children, className, state: controlledState, onStateChange, fullScreenContent, fullScreenTrigger, topToolbar, showTopToolbarInStates, bottomBar, customSmallHeight, customMediumHeight, bottomOffset, }: DraggablePanelProps): react_jsx_runtime.JSX.Element;
 
 type SearchBoxVariant = 'card' | 'map';
 type SearchBoxMode = 'default' | 'scenic' | 'scenic-date';

package/dist/index.d.ts

@@ -256,8 +256,11 @@ interface DraggablePanelProps {
     topToolbar?: TopToolbarProps;
     showTopToolbarInStates?: number[];
     bottomBar?: React__default.ReactNode;
+    customSmallHeight?: number;
+    customMediumHeight?: number;
+    bottomOffset?: number;
 }
-declare function DraggablePanel({ children, className, state: controlledState, onStateChange, fullScreenContent, fullScreenTrigger, topToolbar, showTopToolbarInStates, bottomBar }: DraggablePanelProps): react_jsx_runtime.JSX.Element;
+declare function DraggablePanel({ children, className, state: controlledState, onStateChange, fullScreenContent, fullScreenTrigger, topToolbar, showTopToolbarInStates, bottomBar, customSmallHeight, customMediumHeight, bottomOffset, }: DraggablePanelProps): react_jsx_runtime.JSX.Element;
 
 type SearchBoxVariant = 'card' | 'map';
 type SearchBoxMode = 'default' | 'scenic' | 'scenic-date';

package/dist/index.js

@@ -122,7 +122,7 @@ function Btn({
       type: "button",
       onClick,
       className: cn(
-        "group relative flex items-center justify-center max-w-[300px] transition-all outline-none",
+        "group relative flex items-center justify-center max-w-[300px] mx-auto transition-all outline-none",
         config.height,
         config.radius,
         paddingClass,
@@ -400,7 +400,8 @@ function StatGrid({ items, className }) {
     accent: "text-accent",
     default: "text-foreground"
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid grid-cols-3 gap-[var(--spacing-sm)]", className), children: items.map((item, idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-card-muted rounded-[var(--radius-base)] p-[var(--spacing-sm)] text-center", children: [
+  const colsClass = items.length <= 2 ? "grid-cols-2" : items.length === 3 ? "grid-cols-3" : "grid-cols-4";
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-[var(--spacing-sm)]", colsClass, className), children: items.map((item, idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-card-muted rounded-[16px] p-[var(--spacing-sm)] text-center", children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-1 font-medium text-lg", variantStyles[item.variant || "default"]), children: item.value }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-muted-foreground", children: item.label })
   ] }, idx)) });
@@ -1609,7 +1610,7 @@ function BottomSheet({
         animate: { opacity: 1 },
         exit: { opacity: 0 },
         transition: { duration: 0.3 },
-        className: `${positionClass} inset-0 bg-black/60 z-50`,
+        className: `${positionClass} inset-0 bg-black/60 z-[1100]`,
         onClick: () => onOpenChange(false)
       }
     ),
@@ -1621,7 +1622,7 @@ function BottomSheet({
         exit: { y: "100%" },
         transition: { type: "spring", damping: 25, stiffness: 300 },
         className: cn(
-          `${positionClass} bottom-0 left-0 right-0 z-50 bg-white rounded-t-[32px] overflow-hidden shadow-xl max-h-[90vh] flex flex-col`,
+          `${positionClass} bottom-0 left-0 right-0 z-[1100] bg-white rounded-t-[32px] overflow-hidden shadow-xl max-h-[90vh] flex flex-col`,
           className
         ),
         children: [
@@ -1761,7 +1762,10 @@ function DraggablePanel({
   fullScreenTrigger,
   topToolbar,
   showTopToolbarInStates,
-  bottomBar
+  bottomBar,
+  customSmallHeight,
+  customMediumHeight,
+  bottomOffset = 8
 }) {
   const [internalState, setInternalState] = React.useState(DRAWER_STATES.SMALL);
   const [previousState, setPreviousState] = React.useState(DRAWER_STATES.MEDIUM);
@@ -1776,8 +1780,8 @@ function DraggablePanel({
     setPreviousState(state);
     setState(DRAWER_STATES.FULL);
   };
-  const smallHeight = 160;
-  const mediumHeight = 400;
+  const smallHeight = customSmallHeight ?? 160;
+  const mediumHeight = customMediumHeight ?? 400;
   const onDragEnd = (event, info) => {
     if (state === DRAWER_STATES.FULL) return;
     const offset = info.offset.y;
@@ -1811,19 +1815,20 @@ function DraggablePanel({
       case DRAWER_STATES.MEDIUM:
         return mediumHeight;
       case DRAWER_STATES.LARGE:
-        return "calc(100% - 51px)";
+        return "calc(100% - 8px)";
       case DRAWER_STATES.FULL:
         return "100%";
     }
   };
   const getMargins = () => {
-    if (state === DRAWER_STATES.FULL) return 0;
-    return state === DRAWER_STATES.LARGE ? 0 : 8;
+    if (state === DRAWER_STATES.FULL) return { side: 0, bottom: 0 };
+    if (state === DRAWER_STATES.LARGE) return { side: 0, bottom: 0 };
+    return { side: 8, bottom: bottomOffset };
   };
   const isFullScreen = state === DRAWER_STATES.FULL;
   const shouldShowTopToolbar = topToolbar && (!showTopToolbarInStates || showTopToolbarInStates.includes(state));
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    shouldShowTopToolbar && !isFullScreen && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-[63px] left-0 w-full z-[1000] pointer-events-none", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
+    shouldShowTopToolbar && !isFullScreen && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-[20px] left-0 w-full z-[1000] pointer-events-none", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
       TopToolbar,
       {
         ...topToolbar,
@@ -1854,7 +1859,7 @@ function DraggablePanel({
           height: smallHeight,
           left: 8,
           right: 8,
-          bottom: 8,
+          bottom: bottomOffset,
           borderTopLeftRadius: 32,
           borderTopRightRadius: 32,
           borderBottomLeftRadius: 44,
@@ -1866,9 +1871,9 @@ function DraggablePanel({
         onTouchStart: (e) => e.stopPropagation(),
         animate: {
           height: getHeight(),
-          left: getMargins(),
-          right: getMargins(),
-          bottom: getMargins(),
+          left: getMargins().side,
+          right: getMargins().side,
+          bottom: getMargins().bottom,
           top: isFullScreen ? 0 : "auto",
           borderTopLeftRadius: isFullScreen ? 0 : 32,
           borderTopRightRadius: isFullScreen ? 0 : 32,
@@ -1896,14 +1901,14 @@ function DraggablePanel({
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center size-full h-full relative", children: [
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full flex flex-col items-center pt-[12px] pb-[8px] cursor-grab active:cursor-grabbing touch-none shrink-0 z-10", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-input h-[4px] rounded-[2px] w-[36px]" }) }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(
-                "w-full flex-1 overflow-auto relative",
+                "w-full flex-1 min-h-0 overflow-auto relative",
                 // If Large state and Toolbar is visible, we need to push content down so it clears the fixed toolbar
                 state === DRAWER_STATES.LARGE && shouldShowTopToolbar ? "pt-12" : ""
               ), children: [
                 children,
                 fullScreenTrigger && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4", children: fullScreenTrigger(goToFullScreen) })
               ] }),
-              bottomBar && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full shrink-0 z-20 bg-transparent", children: bottomBar })
+              bottomBar && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full shrink-0 z-20", children: bottomBar })
             ] })
           )
         ]
@@ -2829,6 +2834,7 @@ function TencentMap({
           pitch,
           rotation,
           viewMode: "3D",
+          mapStyleId: "style1",
           baseMap: {
             type: "vector",
             features
@@ -2863,6 +2869,10 @@ function TencentMap({
       initMap();
     }
     return () => {
+      if (mapInstance.current) {
+        mapInstance.current.destroy();
+        mapInstance.current = null;
+      }
     };
   }, []);
   const clearSelection = () => {