@lobehub/ui 5.64.2 → 6.0.0-beta.10

package/es/FloatingPanel/type.d.mts

@@ -0,0 +1,74 @@
+import { ModalRootProps } from "../Modal/atoms.mjs";
+import "../Modal/index.mjs";
+import { CSSProperties, ReactNode } from "react";
+import { MotionProps } from "motion/react";
+//#region src/FloatingPanel/type.d.ts
+export type FloatingPanelPlacement = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';
+export type FloatingPanelOffset = number | string | {
+  x?: number | string;
+  y?: number | string;
+};
+export interface FloatingPanelSize {
+  height: number;
+  width: number;
+}
+export interface FloatingPanelProps {
+  actions?: ReactNode;
+  afterClose?: () => void;
+  ariaLabel?: string;
+  children?: ReactNode;
+  className?: string;
+  classNames?: {
+    backdrop?: string;
+    actions?: string;
+    body?: string;
+    close?: string;
+    footer?: string;
+    header?: string;
+    panel?: string;
+    resizeHandle?: string;
+    title?: string;
+    wrapper?: string;
+  };
+  closable?: boolean;
+  closeIcon?: ReactNode;
+  closeLabel?: string;
+  defaultOpen?: boolean;
+  footer?: ReactNode;
+  getContainer?: false | HTMLElement | null;
+  height?: number | string;
+  keyboard?: boolean;
+  mask?: boolean;
+  maskClosable?: boolean;
+  maxHeight?: number;
+  maxWidth?: number;
+  minHeight?: number;
+  minWidth?: number;
+  modal?: boolean;
+  motionProps?: MotionProps;
+  offset?: FloatingPanelOffset;
+  onClose?: () => void;
+  onOpenChange?: ModalRootProps['onOpenChange'];
+  onResize?: (size: FloatingPanelSize) => void;
+  onResizeEnd?: (size: FloatingPanelSize) => void;
+  open?: boolean;
+  placement?: FloatingPanelPlacement;
+  resizable?: boolean;
+  styles?: {
+    actions?: CSSProperties;
+    backdrop?: CSSProperties;
+    body?: CSSProperties;
+    close?: CSSProperties;
+    footer?: CSSProperties;
+    header?: CSSProperties;
+    panel?: CSSProperties;
+    resizeHandle?: CSSProperties;
+    title?: CSSProperties;
+    wrapper?: CSSProperties;
+  };
+  title?: ReactNode;
+  width?: number | string;
+  zIndex?: number;
+}
+//#endregion
+//# sourceMappingURL=type.d.mts.map

package/es/FloatingSheet/FloatingSheet.d.mts

@@ -0,0 +1,5 @@
+import { FloatingSheetProps } from "./type.mjs";
+//#region src/FloatingSheet/FloatingSheet.d.ts
+export declare function FloatingSheet({ open: openProp, onOpenChange, defaultOpen, snapPoints: snapPointsProp, activeSnapPoint: activeSnapPointProp, onSnapPointChange, minHeight: minHeightProp, maxHeight: maxHeightProp, restingHeight: restingHeightProp, mode, variant, width, title, headerActions, dismissible, closeThreshold, children, className }: FloatingSheetProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=FloatingSheet.d.mts.map

package/es/FloatingSheet/FloatingSheet.mjs

@@ -0,0 +1,210 @@
+import { styleProps } from "../styles/stylex/props.mjs";
+import { styles } from "./style.mjs";
+import { FloatingSheetHeader } from "./FloatingSheetHeader.mjs";
+import { clamp, dampenValue, resolveSize } from "./helpers.mjs";
+import { useSheetDrag } from "./useSheetDrag.mjs";
+import { useSnapPoints } from "./useSnapPoints.mjs";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
+//#region src/FloatingSheet/FloatingSheet.tsx
+const ANIMATION_MS = 300;
+function FloatingSheet({ open: openProp, onOpenChange, defaultOpen = false, snapPoints: snapPointsProp, activeSnapPoint: activeSnapPointProp, onSnapPointChange, minHeight: minHeightProp = 200, maxHeight: maxHeightProp = .8, restingHeight: restingHeightProp, mode = "overlay", variant = "elevated", width = "100%", title, headerActions, dismissible = true, closeThreshold = .25, children, className }) {
+	const s = styles;
+	const isControlled = openProp !== void 0;
+	const [internalOpen, setInternalOpen] = useState(defaultOpen);
+	const isOpen = isControlled ? openProp : internalOpen;
+	const setOpen = useCallback((value) => {
+		if (!isControlled) setInternalOpen(value);
+		onOpenChange?.(value);
+	}, [isControlled, onOpenChange]);
+	const containerRef = useRef(null);
+	const sheetRef = useRef(null);
+	const [containerHeight, setContainerHeight] = useState(0);
+	useEffect(() => {
+		const parent = sheetRef.current?.parentElement;
+		if (!parent) return;
+		containerRef.current = parent;
+		const observer = new ResizeObserver((entries) => {
+			for (const entry of entries) setContainerHeight(entry.contentRect.height);
+		});
+		observer.observe(parent);
+		setContainerHeight(parent.getBoundingClientRect().height);
+		return () => observer.disconnect();
+	}, []);
+	const minHeightPx = useMemo(() => resolveSize(minHeightProp, containerHeight), [minHeightProp, containerHeight]);
+	const maxHeightPx = useMemo(() => resolveSize(maxHeightProp, containerHeight), [maxHeightProp, containerHeight]);
+	const restingHeightPx = useMemo(() => restingHeightProp !== void 0 ? clamp(resolveSize(restingHeightProp, containerHeight), minHeightPx, maxHeightPx) : minHeightPx, [
+		restingHeightProp,
+		containerHeight,
+		minHeightPx,
+		maxHeightPx
+	]);
+	const hasSnapPoints = !!snapPointsProp && snapPointsProp.length > 0;
+	const { snapPointHeights, findActiveIndex, getSnapRelease } = useSnapPoints({
+		closeThreshold,
+		containerHeight,
+		containerRef,
+		maxHeightPx,
+		minHeightPx,
+		snapPoints: snapPointsProp ?? []
+	});
+	const restingHeight = useMemo(() => {
+		if (!containerHeight) return 0;
+		if (hasSnapPoints && activeSnapPointProp !== void 0) {
+			const resolved = resolveSize(activeSnapPointProp, containerHeight);
+			return clamp(resolved, minHeightPx, maxHeightPx);
+		}
+		if (hasSnapPoints && snapPointHeights.length > 0) return snapPointHeights[0];
+		return restingHeightPx;
+	}, [
+		containerHeight,
+		hasSnapPoints,
+		activeSnapPointProp,
+		snapPointHeights,
+		minHeightPx,
+		maxHeightPx,
+		restingHeightPx
+	]);
+	const [height, setHeight] = useState(isOpen ? restingHeight : 0);
+	const [isAnimating, setIsAnimating] = useState(false);
+	const [isClosing, setIsClosing] = useState(false);
+	const heightBeforeDrag = useRef(0);
+	const prevOpenRef = useRef(isOpen);
+	useEffect(() => {
+		const wasOpen = prevOpenRef.current;
+		prevOpenRef.current = isOpen;
+		if (isOpen && !wasOpen) {
+			setIsClosing(false);
+			setIsAnimating(true);
+			setHeight(restingHeight);
+			const timer = setTimeout(() => setIsAnimating(false), ANIMATION_MS);
+			return () => clearTimeout(timer);
+		}
+		if (!isOpen && wasOpen) {
+			setIsClosing(true);
+			setIsAnimating(true);
+			setHeight(0);
+			const timer = setTimeout(() => {
+				setIsAnimating(false);
+				setIsClosing(false);
+			}, ANIMATION_MS);
+			return () => clearTimeout(timer);
+		}
+	}, [isOpen]);
+	useEffect(() => {
+		if (isOpen && !isDragging) setHeight(restingHeight);
+	}, [restingHeight]);
+	const onDragChange = useCallback((draggedDistance) => {
+		const newHeight = heightBeforeDrag.current + draggedDistance;
+		if (hasSnapPoints) {
+			const highest = snapPointHeights.at(-1) ?? maxHeightPx;
+			const lowest = snapPointHeights[0] ?? minHeightPx;
+			if (newHeight > highest) {
+				const overshoot = newHeight - highest;
+				setHeight(highest + dampenValue(overshoot));
+			} else if (newHeight < lowest) {
+				const undershoot = lowest - newHeight;
+				setHeight(Math.max(0, lowest - dampenValue(undershoot)));
+			} else setHeight(newHeight);
+		} else setHeight(clamp(newHeight, 0, maxHeightPx));
+	}, [
+		hasSnapPoints,
+		snapPointHeights,
+		maxHeightPx,
+		minHeightPx
+	]);
+	const onDragEnd = useCallback((draggedDistance, velocity) => {
+		setIsAnimating(true);
+		const currentHeight = heightBeforeDrag.current + draggedDistance;
+		if (hasSnapPoints) {
+			const activeIndex = findActiveIndex(heightBeforeDrag.current);
+			const result = getSnapRelease({
+				activeIndex,
+				currentHeight,
+				dismissible,
+				draggedDistance,
+				velocity
+			});
+			if (result.type === "dismiss") {
+				setIsClosing(true);
+				setHeight(0);
+				const timer = setTimeout(() => {
+					setOpen(false);
+					setIsAnimating(false);
+					setIsClosing(false);
+				}, ANIMATION_MS);
+				return () => clearTimeout(timer);
+			}
+			setHeight(result.height);
+			const originalSnapValue = snapPointsProp?.find((sp) => resolveSize(sp, containerHeight) === result.height || clamp(resolveSize(sp, containerHeight), minHeightPx, maxHeightPx) === result.height);
+			if (originalSnapValue !== void 0) onSnapPointChange?.(originalSnapValue);
+		} else {
+			if (dismissible && currentHeight < minHeightPx * closeThreshold) {
+				setIsClosing(true);
+				setHeight(0);
+				const timer = setTimeout(() => {
+					setOpen(false);
+					setIsAnimating(false);
+					setIsClosing(false);
+				}, ANIMATION_MS);
+				return () => clearTimeout(timer);
+			}
+			setHeight(clamp(currentHeight, minHeightPx, maxHeightPx));
+		}
+		setTimeout(() => setIsAnimating(false), ANIMATION_MS);
+	}, [
+		hasSnapPoints,
+		findActiveIndex,
+		getSnapRelease,
+		dismissible,
+		snapPointsProp,
+		containerHeight,
+		minHeightPx,
+		maxHeightPx,
+		closeThreshold,
+		setOpen,
+		onSnapPointChange
+	]);
+	const { isDragging, handleProps } = useSheetDrag({
+		enabled: isOpen ?? false,
+		onDragChange,
+		onDragEnd
+	});
+	useEffect(() => {
+		if (isDragging) heightBeforeDrag.current = height;
+	}, [isDragging]);
+	const isVisible = isOpen || isClosing || height > 0;
+	const shouldAnimate = !isDragging && isAnimating;
+	const inlineOverflowUp = mode === "inline" && isVisible ? Math.max(0, height - restingHeightPx) : 0;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-floating-sheet": "",
+		"data-state": isOpen ? "open" : "closed",
+		ref: sheetRef,
+		...styleProps([
+			s.root,
+			variant === "embedded" ? s.embedded : s.elevated,
+			mode === "overlay" ? s.overlay : s.inline,
+			mode === "overlay" ? s.overlayRadius : s.inlineRadius,
+			shouldAnimate && s.transition,
+			!isVisible && s.hidden
+		], className, {
+			height: isVisible ? height : 0,
+			marginTop: inlineOverflowUp ? -inlineOverflowUp : void 0,
+			width
+		}),
+		children: [/* @__PURE__ */ jsx(FloatingSheetHeader, {
+			handleProps,
+			headerActions,
+			isDragging,
+			title
+		}), /* @__PURE__ */ jsx("div", {
+			...stylex.props(s.content),
+			children
+		})]
+	});
+}
+//#endregion
+export { FloatingSheet };
+
+//# sourceMappingURL=FloatingSheet.mjs.map

package/es/FloatingSheet/FloatingSheet.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingSheet.mjs","names":[],"sources":["../../src/FloatingSheet/FloatingSheet.tsx"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { FloatingSheetHeader } from './FloatingSheetHeader';\nimport { clamp, dampenValue, resolveSize } from './helpers';\nimport { styles } from './style';\nimport type { FloatingSheetProps } from './type';\nimport { useSheetDrag } from './useSheetDrag';\nimport { useSnapPoints } from './useSnapPoints';\n\nconst ANIMATION_MS = 300;\n\nexport function FloatingSheet({\n  open: openProp,\n  onOpenChange,\n  defaultOpen = false,\n  snapPoints: snapPointsProp,\n  activeSnapPoint: activeSnapPointProp,\n  onSnapPointChange,\n  minHeight: minHeightProp = 200,\n  maxHeight: maxHeightProp = 0.8,\n  restingHeight: restingHeightProp,\n  mode = 'overlay',\n  variant = 'elevated',\n  width = '100%',\n  title,\n  headerActions,\n  dismissible = true,\n  closeThreshold = 0.25,\n  children,\n  className,\n}: FloatingSheetProps) {\n  const s = styles;\n\n  // Controlled / uncontrolled open state\n  const isControlled = openProp !== undefined;\n  const [internalOpen, setInternalOpen] = useState(defaultOpen);\n  const isOpen = isControlled ? openProp : internalOpen;\n\n  const setOpen = useCallback(\n    (value: boolean) => {\n      if (!isControlled) setInternalOpen(value);\n      onOpenChange?.(value);\n    },\n    [isControlled, onOpenChange],\n  );\n\n  // Container measurement via ResizeObserver\n  const containerRef = useRef<HTMLElement | null>(null);\n  const sheetRef = useRef<HTMLDivElement>(null);\n  const [containerHeight, setContainerHeight] = useState(0);\n\n  useEffect(() => {\n    const parent = sheetRef.current?.parentElement;\n    if (!parent) return;\n    containerRef.current = parent;\n\n    const observer = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        setContainerHeight(entry.contentRect.height);\n      }\n    });\n    observer.observe(parent);\n    setContainerHeight(parent.getBoundingClientRect().height);\n\n    return () => observer.disconnect();\n  }, []);\n\n  // Resolve min/max to px\n  const minHeightPx = useMemo(\n    () => resolveSize(minHeightProp, containerHeight),\n    [minHeightProp, containerHeight],\n  );\n  const maxHeightPx = useMemo(\n    () => resolveSize(maxHeightProp, containerHeight),\n    [maxHeightProp, containerHeight],\n  );\n  const restingHeightPx = useMemo(\n    () =>\n      restingHeightProp !== undefined\n        ? clamp(resolveSize(restingHeightProp, containerHeight), minHeightPx, maxHeightPx)\n        : minHeightPx,\n    [restingHeightProp, containerHeight, minHeightPx, maxHeightPx],\n  );\n\n  // Snap points\n  const hasSnapPoints = !!snapPointsProp && snapPointsProp.length > 0;\n  const { snapPointHeights, findActiveIndex, getSnapRelease } = useSnapPoints({\n    closeThreshold,\n    containerHeight,\n    containerRef,\n    maxHeightPx,\n    minHeightPx,\n    snapPoints: snapPointsProp ?? [],\n  });\n\n  // Compute the \"resting\" height for the current open + snap state\n  const restingHeight = useMemo(() => {\n    if (!containerHeight) return 0;\n    if (hasSnapPoints && activeSnapPointProp !== undefined) {\n      const resolved = resolveSize(activeSnapPointProp, containerHeight);\n      return clamp(resolved, minHeightPx, maxHeightPx);\n    }\n    if (hasSnapPoints && snapPointHeights.length > 0) {\n      return snapPointHeights[0];\n    }\n    return restingHeightPx;\n  }, [\n    containerHeight,\n    hasSnapPoints,\n    activeSnapPointProp,\n    snapPointHeights,\n    minHeightPx,\n    maxHeightPx,\n    restingHeightPx,\n  ]);\n\n  const [height, setHeight] = useState(isOpen ? restingHeight : 0);\n  const [isAnimating, setIsAnimating] = useState(false);\n  // Keeps sheet visible during close animation (height → 0)\n  const [isClosing, setIsClosing] = useState(false);\n  const heightBeforeDrag = useRef(0);\n  const prevOpenRef = useRef(isOpen);\n\n  // Handle open/close transitions\n  useEffect(() => {\n    const wasOpen = prevOpenRef.current;\n    prevOpenRef.current = isOpen;\n\n    if (isOpen && !wasOpen) {\n      // Opening: animate from 0 → resting height\n      setIsClosing(false);\n      setIsAnimating(true);\n      setHeight(restingHeight);\n      const timer = setTimeout(() => setIsAnimating(false), ANIMATION_MS);\n      return () => clearTimeout(timer);\n    }\n\n    if (!isOpen && wasOpen) {\n      // Closing: animate from current height → 0, then hide\n      setIsClosing(true);\n      setIsAnimating(true);\n      setHeight(0);\n      const timer = setTimeout(() => {\n        setIsAnimating(false);\n        setIsClosing(false);\n      }, ANIMATION_MS);\n      return () => clearTimeout(timer);\n    }\n  }, [isOpen]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  // Sync height when resting height changes (container resize, snap point change)\n  useEffect(() => {\n    if (isOpen && !isDragging) {\n      setHeight(restingHeight);\n    }\n  }, [restingHeight]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  // Drag handlers\n  const onDragChange = useCallback(\n    (draggedDistance: number) => {\n      const newHeight = heightBeforeDrag.current + draggedDistance;\n\n      if (hasSnapPoints) {\n        const highest = snapPointHeights.at(-1) ?? maxHeightPx;\n        const lowest = snapPointHeights[0] ?? minHeightPx;\n\n        if (newHeight > highest) {\n          const overshoot = newHeight - highest;\n          setHeight(highest + dampenValue(overshoot));\n        } else if (newHeight < lowest) {\n          const undershoot = lowest - newHeight;\n          setHeight(Math.max(0, lowest - dampenValue(undershoot)));\n        } else {\n          setHeight(newHeight);\n        }\n      } else {\n        setHeight(clamp(newHeight, 0, maxHeightPx));\n      }\n    },\n    [hasSnapPoints, snapPointHeights, maxHeightPx, minHeightPx],\n  );\n\n  const onDragEnd = useCallback(\n    (draggedDistance: number, velocity: number) => {\n      setIsAnimating(true);\n      const currentHeight = heightBeforeDrag.current + draggedDistance;\n\n      if (hasSnapPoints) {\n        const activeIndex = findActiveIndex(heightBeforeDrag.current);\n        const result = getSnapRelease({\n          activeIndex,\n          currentHeight,\n          dismissible,\n          draggedDistance,\n          velocity,\n        });\n\n        if (result.type === 'dismiss') {\n          setIsClosing(true);\n          setHeight(0);\n          const timer = setTimeout(() => {\n            setOpen(false);\n            setIsAnimating(false);\n            setIsClosing(false);\n          }, ANIMATION_MS);\n          return () => clearTimeout(timer);\n        }\n\n        setHeight(result.height);\n        const originalSnapValue = snapPointsProp?.find(\n          (sp) =>\n            resolveSize(sp, containerHeight) === result.height ||\n            clamp(resolveSize(sp, containerHeight), minHeightPx, maxHeightPx) === result.height,\n        );\n        if (originalSnapValue !== undefined) {\n          onSnapPointChange?.(originalSnapValue);\n        }\n      } else {\n        if (dismissible && currentHeight < minHeightPx * closeThreshold) {\n          setIsClosing(true);\n          setHeight(0);\n          const timer = setTimeout(() => {\n            setOpen(false);\n            setIsAnimating(false);\n            setIsClosing(false);\n          }, ANIMATION_MS);\n          return () => clearTimeout(timer);\n        }\n        setHeight(clamp(currentHeight, minHeightPx, maxHeightPx));\n      }\n\n      setTimeout(() => setIsAnimating(false), ANIMATION_MS);\n    },\n    [\n      hasSnapPoints,\n      findActiveIndex,\n      getSnapRelease,\n      dismissible,\n      snapPointsProp,\n      containerHeight,\n      minHeightPx,\n      maxHeightPx,\n      closeThreshold,\n      setOpen,\n      onSnapPointChange,\n    ],\n  );\n\n  const { isDragging, handleProps } = useSheetDrag({\n    enabled: isOpen ?? false,\n    onDragChange,\n    onDragEnd,\n  });\n\n  // Record height at drag start\n  useEffect(() => {\n    if (isDragging) {\n      heightBeforeDrag.current = height;\n    }\n  }, [isDragging]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  const isVisible = isOpen || isClosing || height > 0;\n  const shouldAnimate = !isDragging && isAnimating;\n  const inlineOverflowUp =\n    mode === 'inline' && isVisible ? Math.max(0, height - restingHeightPx) : 0;\n\n  return (\n    <div\n      data-floating-sheet=\"\"\n      data-state={isOpen ? 'open' : 'closed'}\n      ref={sheetRef}\n      {...styleProps(\n        [\n          s.root,\n          variant === 'embedded' ? s.embedded : s.elevated,\n          mode === 'overlay' ? s.overlay : s.inline,\n          mode === 'overlay' ? s.overlayRadius : s.inlineRadius,\n          shouldAnimate && s.transition,\n          !isVisible && s.hidden,\n        ],\n        className,\n        {\n          height: isVisible ? height : 0,\n          marginTop: inlineOverflowUp ? -inlineOverflowUp : undefined,\n          width,\n        },\n      )}\n    >\n      <FloatingSheetHeader\n        handleProps={handleProps}\n        headerActions={headerActions}\n        isDragging={isDragging}\n        title={title}\n      />\n      <div {...stylex.props(s.content)}>{children}</div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/es/FloatingSheet/FloatingSheetHeader.mjs

@@ -0,0 +1,26 @@
+import { styles } from "./style.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
+//#region src/FloatingSheet/FloatingSheetHeader.tsx
+function FloatingSheetHeader({ title, headerActions, isDragging, handleProps }) {
+	const s = styles;
+	return /* @__PURE__ */ jsxs("div", {
+		...stylex.props(s.header, isDragging && s.headerDragging),
+		...handleProps,
+		children: [/* @__PURE__ */ jsx("div", { ...stylex.props(s.handle) }), /* @__PURE__ */ jsxs("div", {
+			...stylex.props(s.headerContent),
+			children: [title && /* @__PURE__ */ jsx("div", {
+				...stylex.props(s.headerTitle),
+				children: title
+			}), headerActions && /* @__PURE__ */ jsx("div", {
+				...stylex.props(s.headerActions),
+				"data-no-drag": "",
+				children: headerActions
+			})]
+		})]
+	});
+}
+//#endregion
+export { FloatingSheetHeader };
+
+//# sourceMappingURL=FloatingSheetHeader.mjs.map

package/es/FloatingSheet/FloatingSheetHeader.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingSheetHeader.mjs","names":[],"sources":["../../src/FloatingSheet/FloatingSheetHeader.tsx"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport { type ReactNode } from 'react';\n\nimport { styles } from './style';\n\ninterface FloatingSheetHeaderProps {\n  handleProps: {\n    onMouseDown: (e: React.MouseEvent<HTMLDivElement>) => void;\n  };\n  headerActions?: ReactNode;\n  isDragging: boolean;\n  title?: ReactNode;\n}\n\nexport function FloatingSheetHeader({\n  title,\n  headerActions,\n  isDragging,\n  handleProps,\n}: FloatingSheetHeaderProps) {\n  const s = styles;\n\n  return (\n    <div {...stylex.props(s.header, isDragging && s.headerDragging)} {...handleProps}>\n      <div {...stylex.props(s.handle)} />\n      <div {...stylex.props(s.headerContent)}>\n        {title && <div {...stylex.props(s.headerTitle)}>{title}</div>}\n        {headerActions && (\n          <div {...stylex.props(s.headerActions)} data-no-drag=\"\">\n            {headerActions}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;AAWA,SAAgB,oBAAoB,EAClC,OACA,eACA,YACA,eAC2B;CAC3B,MAAM,IAAI;CACV,OAAO,qBAAC,OAAD;EAAK,GAAI,OAAO,MAAM,EAAE,QAAQ,cAAc,EAAE,cAAc;EAAG,GAAI;EAArE,UAAA,CACH,oBAAC,OAAD,EAAK,GAAI,OAAO,MAAM,EAAE,MAAM,EAAI,CAAA,GAClC,qBAAC,OAAD;GAAK,GAAI,OAAO,MAAM,EAAE,aAAa;GAArC,UAAA,CACG,SAAS,oBAAC,OAAD;IAAK,GAAI,OAAO,MAAM,EAAE,WAAW;IAAI,UAAA;GAAW,CAAA,GAC3D,iBAAiB,oBAAC,OAAD;IAAK,GAAI,OAAO,MAAM,EAAE,aAAa;IAAG,gBAAa;IAClE,UAAA;GACE,CAAA,CACJ;EACF,CAAA,CAAA;;AACT"}

package/es/FloatingSheet/helpers.mjs

@@ -0,0 +1,30 @@
+//#region src/FloatingSheet/helpers.ts
+/**
+* Clamp a value between min and max.
+*/
+function clamp(value, min, max) {
+	return Math.min(Math.max(value, min), max);
+}
+/**
+* Rubber-band damping for drag resistance beyond snap bounds.
+* Returns 0 when v <= 0, near 1:1 for small v, then grows logarithmically.
+*/
+function dampenValue(v) {
+	if (v <= 0) return 0;
+	return 8 * Math.log1p(v / 8);
+}
+/**
+* Resolve a size value to pixels.
+* 0 < v <= 1 → fraction of containerHeight.
+* v > 1 → pixel value.
+* v === 0 → 0.
+*/
+function resolveSize(value, containerHeight) {
+	if (value === 0) return 0;
+	if (value > 0 && value <= 1) return value * containerHeight;
+	return value;
+}
+//#endregion
+export { clamp, dampenValue, resolveSize };
+
+//# sourceMappingURL=helpers.mjs.map

package/es/FloatingSheet/helpers.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.mjs","names":[],"sources":["../../src/FloatingSheet/helpers.ts"],"sourcesContent":["/**\n * Clamp a value between min and max.\n */\nexport function clamp(value: number, min: number, max: number): number {\n  return Math.min(Math.max(value, min), max);\n}\n\n/**\n * Rubber-band damping for drag resistance beyond snap bounds.\n * Returns 0 when v <= 0, near 1:1 for small v, then grows logarithmically.\n */\nexport function dampenValue(v: number): number {\n  if (v <= 0) return 0;\n  return 8 * Math.log1p(v / 8);\n}\n\n/**\n * Resolve a size value to pixels.\n * 0 < v <= 1 → fraction of containerHeight.\n * v > 1 → pixel value.\n * v === 0 → 0.\n */\nexport function resolveSize(value: number, containerHeight: number): number {\n  if (value === 0) return 0;\n  if (value > 0 && value <= 1) return value * containerHeight;\n  return value;\n}\n"],"mappings":";;;;AAGA,SAAgB,MAAM,OAAe,KAAa,KAAqB;CACrE,OAAO,KAAK,IAAI,KAAK,IAAI,OAAO,GAAG,GAAG,GAAG;AAC3C;;;;;AAMA,SAAgB,YAAY,GAAmB;CAC7C,IAAI,KAAK,GAAG,OAAO;CACnB,OAAO,IAAI,KAAK,MAAM,IAAI,CAAC;AAC7B;;;;;;;AAQA,SAAgB,YAAY,OAAe,iBAAiC;CAC1E,IAAI,UAAU,GAAG,OAAO;CACxB,IAAI,QAAQ,KAAK,SAAS,GAAG,OAAO,QAAQ;CAC5C,OAAO;AACT"}

package/es/FloatingSheet/index.mjs

@@ -0,0 +1 @@
+export { FloatingSheet } from "./FloatingSheet.mjs";

package/es/FloatingSheet/style.mjs

@@ -0,0 +1,107 @@
+//#region src/FloatingSheet/style.ts
+const styles = {
+	content: {
+		kUk6DE: "lb98rzlu",
+		kVQacm: "lbysyzu8",
+		kAzted: "lb2lwn1j",
+		$$css: true
+	},
+	elevated: {
+		kGVxlE: "lbj07k4p",
+		$$css: true
+	},
+	embedded: {
+		kVAM5u: "lb10cypdb",
+		ksu8eU: "lb1y0btm7",
+		kMzoRj: "lbmkeg23",
+		kGVxlE: "lb1gnnqk1",
+		$$css: true
+	},
+	handle: {
+		kaIpWk: "lb1cum3z5",
+		kWkggS: "lb1x3duf0",
+		k1K539: "lb1e56ztr",
+		kZKoxP: "lbqu0tyb",
+		kzqmXN: "lb1td3qas",
+		$$css: true
+	},
+	header: {
+		kg3NbH: "lb1hr3lfm",
+		kGNEyG: "lb6s0dn4",
+		kkrTdU: "lb1jm3nie",
+		k1xSpc: "lb78zum5",
+		kXwgrk: "lbdt5ytf",
+		kmuXW: "lb2lah0s",
+		kGO01o: "lbjkvuk6",
+		kLKAdn: "lb1y1aw1k",
+		kfSwDN: "lb87ps6o",
+		$$css: true
+	},
+	headerDragging: {
+		kkrTdU: "lbi9pz9s",
+		$$css: true
+	},
+	headerActions: {
+		kOIVth: "lb1jnr06f",
+		kGNEyG: "lb6s0dn4",
+		k1xSpc: "lb78zum5",
+		kmuXW: "lb2lah0s",
+		$$css: true
+	},
+	headerContent: {
+		kGNEyG: "lb6s0dn4",
+		k1xSpc: "lb78zum5",
+		kjj79g: "lb1qughib",
+		kAzted: "lbjwf9q1",
+		kzqmXN: "lbh8yej3",
+		$$css: true
+	},
+	headerTitle: {
+		kUk6DE: "lb98rzlu",
+		k7Eaqz: "lbeuugli",
+		$$css: true
+	},
+	hidden: {
+		k33iCy: "lblshs6z",
+		$$css: true
+	},
+	inline: {
+		kmuXW: "lb2lah0s",
+		kVAEAm: "lb1n2onr6",
+		kY2c9j: "lb1vjfegm",
+		$$css: true
+	},
+	inlineRadius: {
+		kaIpWk: "lb4pepcl",
+		$$css: true
+	},
+	overlay: {
+		kkqhue: "lb17y0mx6",
+		krVfgx: "lb1ey2m1c",
+		kVAEAm: "lb10l6tqk",
+		kY2c9j: "lb1n327nk",
+		$$css: true
+	},
+	overlayRadius: {
+		kT0f0o: "lb16uus16",
+		kVL7Gh: "lbbiv7yw",
+		kfmiAY: "lb1a5l9x9",
+		krdFHd: "lb6nl9eh",
+		$$css: true
+	},
+	root: {
+		kVQacm: "lbb3r6kr",
+		kWkggS: "lb6yijhg",
+		k1xSpc: "lb78zum5",
+		kXwgrk: "lbdt5ytf",
+		$$css: true
+	},
+	transition: {
+		kmkexE: "lbcqlole",
+		$$css: true
+	}
+};
+//#endregion
+export { styles };
+
+//# sourceMappingURL=style.mjs.map

package/es/FloatingSheet/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/FloatingSheet/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nconst transitionDuration = '0.3s';\nconst transitionEasing = 'cubic-bezier(0.32, 0.72, 0, 1)';\n\nexport const styles = stylex.create({\n  content: {\n    flex: '1',\n    overflow: 'auto',\n    minHeight: 0,\n  },\n  elevated: {\n    boxShadow: `${cssVar.boxShadowSecondary}, var(--lobe-ring)`,\n  },\n  embedded: {\n    borderColor: cssVar.colorBorderSecondary,\n    borderStyle: 'solid',\n    borderWidth: 1,\n    boxShadow: 'none',\n  },\n  handle: {\n    borderRadius: 2,\n    backgroundColor: cssVar.colorBorderSecondary,\n    marginBlockEnd: 8,\n    height: 4,\n    width: 32,\n  },\n  header: {\n    paddingInline: 16,\n    alignItems: 'center',\n    cursor: 'grab',\n    display: 'flex',\n    flexDirection: 'column',\n    flexShrink: 0,\n    paddingBlockEnd: 4,\n    paddingBlockStart: 8,\n    userSelect: 'none',\n  },\n  headerDragging: {\n    cursor: 'grabbing',\n  },\n  headerActions: {\n    gap: 4,\n    alignItems: 'center',\n    display: 'flex',\n    flexShrink: 0,\n  },\n  headerContent: {\n    alignItems: 'center',\n    display: 'flex',\n    justifyContent: 'space-between',\n    minHeight: 24,\n    width: '100%',\n  },\n  headerTitle: {\n    flex: '1',\n    minWidth: 0,\n  },\n  hidden: {\n    visibility: 'hidden',\n  },\n  inline: {\n    flexShrink: 0,\n    position: 'relative',\n    zIndex: 1,\n  },\n  inlineRadius: {\n    borderRadius: 12,\n  },\n  overlay: {\n    insetInline: 0,\n    insetBlockEnd: 0,\n    position: 'absolute',\n    zIndex: 10,\n  },\n  overlayRadius: {\n    borderEndEndRadius: 0,\n    borderEndStartRadius: 0,\n    borderStartEndRadius: 12,\n    borderStartStartRadius: 12,\n  },\n  root: {\n    overflow: 'hidden',\n    backgroundColor: cssVar.colorBgContainer,\n    display: 'flex',\n    flexDirection: 'column',\n  },\n  transition: {\n    transition: `height ${transitionDuration} ${transitionEasing}, margin-block-start ${transitionDuration} ${transitionEasing}`,\n  },\n});\n"],"mappings":";AAKA,MAAa,SAAS;CACpB,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,gBAAgB;EACd,QAAQ;EACR,OAAO;CACT;CACA,eAAe;EACb,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,OAAO;CACT;CACA,eAAe;EACb,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,eAAe;EACb,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,OAAO;CACT;AACF"}

package/es/FloatingSheet/type.d.mts

@@ -0,0 +1,24 @@
+import { ReactNode } from "react";
+//#region src/FloatingSheet/type.d.ts
+export interface FloatingSheetProps {
+  activeSnapPoint?: number;
+  children?: ReactNode;
+  className?: string;
+  closeThreshold?: number;
+  defaultOpen?: boolean;
+  dismissible?: boolean;
+  headerActions?: ReactNode;
+  maxHeight?: number;
+  minHeight?: number;
+  mode?: 'overlay' | 'inline';
+  onOpenChange?: (open: boolean) => void;
+  onSnapPointChange?: (snapPoint: number) => void;
+  open?: boolean;
+  restingHeight?: number;
+  snapPoints?: number[];
+  title?: ReactNode;
+  variant?: 'elevated' | 'embedded';
+  width?: number | string;
+}
+//#endregion
+//# sourceMappingURL=type.d.mts.map

package/es/FloatingSheet/useSheetDrag.mjs

@@ -0,0 +1,51 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+//#region src/FloatingSheet/useSheetDrag.ts
+function useSheetDrag({ onDragChange, onDragEnd, enabled }) {
+	const [isDragging, setIsDragging] = useState(false);
+	const startY = useRef(0);
+	const startTime = useRef(0);
+	const draggingRef = useRef(false);
+	const onDragChangeRef = useRef(onDragChange);
+	const onDragEndRef = useRef(onDragEnd);
+	onDragChangeRef.current = onDragChange;
+	onDragEndRef.current = onDragEnd;
+	useEffect(() => {
+		if (!draggingRef.current) return;
+		const onMouseMove = (e) => {
+			e.preventDefault();
+			const draggedDistance = startY.current - e.clientY;
+			onDragChangeRef.current(draggedDistance);
+		};
+		const onMouseUp = (e) => {
+			draggingRef.current = false;
+			setIsDragging(false);
+			const draggedDistance = startY.current - e.clientY;
+			const elapsed = Date.now() - startTime.current;
+			const velocity = elapsed > 0 ? Math.abs(draggedDistance) / elapsed : 0;
+			onDragEndRef.current(draggedDistance, velocity);
+		};
+		document.addEventListener("mousemove", onMouseMove);
+		document.addEventListener("mouseup", onMouseUp);
+		return () => {
+			document.removeEventListener("mousemove", onMouseMove);
+			document.removeEventListener("mouseup", onMouseUp);
+		};
+	}, [isDragging]);
+	return {
+		isDragging,
+		handleProps: { onMouseDown: useCallback((event) => {
+			if (!enabled) return;
+			if (event.button !== 0) return;
+			if (event.target.closest?.("[data-no-drag]")) return;
+			event.preventDefault();
+			startY.current = event.clientY;
+			startTime.current = Date.now();
+			draggingRef.current = true;
+			setIsDragging(true);
+		}, [enabled]) }
+	};
+}
+//#endregion
+export { useSheetDrag };
+
+//# sourceMappingURL=useSheetDrag.mjs.map

package/es/FloatingSheet/useSheetDrag.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSheetDrag.mjs","names":[],"sources":["../../src/FloatingSheet/useSheetDrag.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\ninterface UseSheetDragOptions {\n  enabled: boolean;\n  onDragChange: (draggedDistance: number) => void;\n  onDragEnd: (draggedDistance: number, velocity: number) => void;\n}\n\nexport function useSheetDrag({ onDragChange, onDragEnd, enabled }: UseSheetDragOptions) {\n  const [isDragging, setIsDragging] = useState(false);\n  const startY = useRef(0);\n  const startTime = useRef(0);\n  const draggingRef = useRef(false);\n\n  // Store latest callbacks in refs to avoid stale closures in document listeners\n  const onDragChangeRef = useRef(onDragChange);\n  const onDragEndRef = useRef(onDragEnd);\n  onDragChangeRef.current = onDragChange;\n  onDragEndRef.current = onDragEnd;\n\n  useEffect(() => {\n    if (!draggingRef.current) return;\n\n    const onMouseMove = (e: MouseEvent) => {\n      e.preventDefault();\n      const draggedDistance = startY.current - e.clientY;\n      onDragChangeRef.current(draggedDistance);\n    };\n\n    const onMouseUp = (e: MouseEvent) => {\n      draggingRef.current = false;\n      setIsDragging(false);\n\n      const draggedDistance = startY.current - e.clientY;\n      const elapsed = Date.now() - startTime.current;\n      const velocity = elapsed > 0 ? Math.abs(draggedDistance) / elapsed : 0;\n      onDragEndRef.current(draggedDistance, velocity);\n    };\n\n    document.addEventListener('mousemove', onMouseMove);\n    document.addEventListener('mouseup', onMouseUp);\n    return () => {\n      document.removeEventListener('mousemove', onMouseMove);\n      document.removeEventListener('mouseup', onMouseUp);\n    };\n  }, [isDragging]);\n\n  const onMouseDown = useCallback(\n    (event: React.MouseEvent<HTMLDivElement>) => {\n      if (!enabled) return;\n      if (event.button !== 0) return; // left click only\n\n      const target = event.target as HTMLElement;\n      if (target.closest?.('[data-no-drag]')) return;\n\n      event.preventDefault(); // prevent text selection during drag\n\n      startY.current = event.clientY;\n      startTime.current = Date.now();\n      draggingRef.current = true;\n      setIsDragging(true);\n    },\n    [enabled],\n  );\n\n  return {\n    isDragging,\n    handleProps: {\n      onMouseDown,\n    },\n  };\n}\n"],"mappings":";;AAQA,SAAgB,aAAa,EAAE,cAAc,WAAW,WAAgC;CACtF,MAAM,CAAC,YAAY,iBAAiB,SAAS,KAAK;CAClD,MAAM,SAAS,OAAO,CAAC;CACvB,MAAM,YAAY,OAAO,CAAC;CAC1B,MAAM,cAAc,OAAO,KAAK;CAGhC,MAAM,kBAAkB,OAAO,YAAY;CAC3C,MAAM,eAAe,OAAO,SAAS;CACrC,gBAAgB,UAAU;CAC1B,aAAa,UAAU;CAEvB,gBAAgB;EACd,IAAI,CAAC,YAAY,SAAS;EAE1B,MAAM,eAAe,MAAkB;GACrC,EAAE,eAAe;GACjB,MAAM,kBAAkB,OAAO,UAAU,EAAE;GAC3C,gBAAgB,QAAQ,eAAe;EACzC;EAEA,MAAM,aAAa,MAAkB;GACnC,YAAY,UAAU;GACtB,cAAc,KAAK;GAEnB,MAAM,kBAAkB,OAAO,UAAU,EAAE;GAC3C,MAAM,UAAU,KAAK,IAAI,IAAI,UAAU;GACvC,MAAM,WAAW,UAAU,IAAI,KAAK,IAAI,eAAe,IAAI,UAAU;GACrE,aAAa,QAAQ,iBAAiB,QAAQ;EAChD;EAEA,SAAS,iBAAiB,aAAa,WAAW;EAClD,SAAS,iBAAiB,WAAW,SAAS;EAC9C,aAAa;GACX,SAAS,oBAAoB,aAAa,WAAW;GACrD,SAAS,oBAAoB,WAAW,SAAS;EACnD;CACF,GAAG,CAAC,UAAU,CAAC;CAoBf,OAAO;EACL;EACA,aAAa,EACX,aArBgB,aACjB,UAA4C;GAC3C,IAAI,CAAC,SAAS;GACd,IAAI,MAAM,WAAW,GAAG;GAGxB,IADe,MAAM,OACV,UAAU,gBAAgB,GAAG;GAExC,MAAM,eAAe;GAErB,OAAO,UAAU,MAAM;GACvB,UAAU,UAAU,KAAK,IAAI;GAC7B,YAAY,UAAU;GACtB,cAAc,IAAI;EACpB,GACA,CAAC,OAAO,CAMI,EACZ;CACF;AACF"}

package/es/FloatingSheet/useSnapPoints.mjs

@@ -0,0 +1,71 @@
+import { clamp, resolveSize } from "./helpers.mjs";
+import { useMemo } from "react";
+//#region src/FloatingSheet/useSnapPoints.ts
+const VELOCITY_THRESHOLD = .4;
+const DRAG_DISTANCE_RATIO = .4;
+function useSnapPoints({ closeThreshold, snapPoints, containerHeight, minHeightPx, maxHeightPx }) {
+	const snapPointHeights = useMemo(() => {
+		if (!containerHeight) return [];
+		const resolved = snapPoints.map((sp) => clamp(resolveSize(sp, containerHeight), minHeightPx, maxHeightPx)).sort((a, b) => a - b);
+		return [...new Set(resolved)];
+	}, [
+		snapPoints,
+		containerHeight,
+		minHeightPx,
+		maxHeightPx
+	]);
+	function findClosestSnapPoint(height) {
+		if (snapPointHeights.length === 0) return clamp(height, minHeightPx, maxHeightPx);
+		return snapPointHeights.reduce((prev, curr) => Math.abs(curr - height) < Math.abs(prev - height) ? curr : prev);
+	}
+	function findActiveIndex(height) {
+		const closest = findClosestSnapPoint(height);
+		return snapPointHeights.indexOf(closest);
+	}
+	function getSnapRelease({ currentHeight, activeIndex, draggedDistance, velocity, dismissible }) {
+		const isFirst = activeIndex === 0;
+		const isLast = activeIndex === snapPointHeights.length - 1;
+		const isDraggingUp = draggedDistance > 0;
+		const highestSnapPoint = snapPointHeights.at(-1) ?? maxHeightPx;
+		const lowestSnapPoint = snapPointHeights[0] ?? minHeightPx;
+		const nextHigherSnapPoint = snapPointHeights[Math.min(activeIndex + 1, snapPointHeights.length - 1)] ?? highestSnapPoint;
+		const nextLowerSnapPoint = snapPointHeights[Math.max(activeIndex - 1, 0)] ?? lowestSnapPoint;
+		const sheetHeight = snapPointHeights[activeIndex] ?? currentHeight;
+		if (velocity > VELOCITY_THRESHOLD && Math.abs(draggedDistance) < sheetHeight * DRAG_DISTANCE_RATIO) {
+			if (isDraggingUp) {
+				if (isLast) return {
+					type: "snap",
+					height: highestSnapPoint
+				};
+				return {
+					type: "snap",
+					height: nextHigherSnapPoint
+				};
+			} else {
+				if (isFirst) return dismissible ? { type: "dismiss" } : {
+					type: "snap",
+					height: lowestSnapPoint
+				};
+				return {
+					type: "snap",
+					height: nextLowerSnapPoint
+				};
+			}
+		}
+		if (dismissible && isFirst && !isDraggingUp && currentHeight < lowestSnapPoint * closeThreshold) return { type: "dismiss" };
+		return {
+			type: "snap",
+			height: findClosestSnapPoint(currentHeight)
+		};
+	}
+	return {
+		snapPointHeights,
+		findClosestSnapPoint,
+		findActiveIndex,
+		getSnapRelease
+	};
+}
+//#endregion
+export { useSnapPoints };
+
+//# sourceMappingURL=useSnapPoints.mjs.map