@d4gger/design-system 2.7.0

package/dist/components/floatingPanel/FloatingPanel.cjs

@@ -0,0 +1,227 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var FloatingPanel_exports = {};
+__export(FloatingPanel_exports, {
+  FloatingPanel: () => FloatingPanelRoot,
+  FloatingPanelContent: () => FloatingPanelContent,
+  FloatingPanelHandle: () => FloatingPanelHandle,
+  FloatingPanelHeader: () => FloatingPanelHeader
+});
+module.exports = __toCommonJS(FloatingPanel_exports);
+var React = __toESM(require("react"), 1);
+var import_classnames = __toESM(require("classnames"), 1);
+var import_react_slot = require("@radix-ui/react-slot");
+var import_lucide_react = require("lucide-react");
+var import_extractProps = require("../../_internal/helpers/extractProps");
+var import_floatingPanel = require("./floatingPanel.props");
+var import_jsx_runtime = require("react/jsx-runtime");
+const FLOATING_PANEL_SIZE_DEFAULTS = {
+  sm: { width: 240, height: 180 },
+  md: { width: 320, height: 240 },
+  lg: { width: 480, height: 360 }
+};
+const FloatingPanel = React.forwardRef(
+  ({ children, defaultPosition = { x: 0, y: 0 }, defaultSize, onDragEnd, onResize, onClose, ...props }, forwardedRef) => {
+    const { asChild, className, size: componentSize = "md", ...panelProps } = (0, import_extractProps.extractProps)(props, import_floatingPanel.floatingPanelPropDefs);
+    const Comp = asChild ? import_react_slot.Slot : "div";
+    const [open, setOpen] = React.useState(true);
+    const [position, setPosition] = React.useState(defaultPosition);
+    const [size, setSize] = React.useState(defaultSize ?? FLOATING_PANEL_SIZE_DEFAULTS[componentSize]);
+    const [isDragging, setIsDragging] = React.useState(false);
+    const dragOffset = React.useRef({ x: 0, y: 0 });
+    const handleMouseDown = React.useCallback(
+      (e) => {
+        if (e.target.closest("[data-floating-panel-handle]")) return;
+        setIsDragging(true);
+        dragOffset.current = {
+          x: e.clientX - position.x,
+          y: e.clientY - position.y
+        };
+      },
+      [position]
+    );
+    const handleClose = React.useCallback(() => {
+      setOpen(false);
+      onClose?.();
+    }, [onClose]);
+    React.useEffect(() => {
+      if (!open) return;
+      const handleKeyDown = (e) => {
+        if (e.key === "Escape") handleClose();
+      };
+      document.addEventListener("keydown", handleKeyDown);
+      return () => document.removeEventListener("keydown", handleKeyDown);
+    }, [open, handleClose]);
+    React.useEffect(() => {
+      if (!isDragging) return;
+      const handleMouseMove = (e) => {
+        const newPosition = {
+          x: e.clientX - dragOffset.current.x,
+          y: e.clientY - dragOffset.current.y
+        };
+        setPosition(newPosition);
+      };
+      const handleMouseUp = () => {
+        setIsDragging(false);
+        onDragEnd?.(position);
+      };
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+      return () => {
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+      };
+    }, [isDragging, onDragEnd, position]);
+    const handleResize = React.useCallback(
+      (direction, e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        const startX = e.clientX;
+        const startY = e.clientY;
+        const startWidth = size.width;
+        const startHeight = size.height;
+        const handleMouseMove = (moveEvent) => {
+          const newWidth = direction.includes("e") ? Math.max(150, startWidth + (moveEvent.clientX - startX)) : startWidth;
+          const newHeight = direction.includes("s") ? Math.max(100, startHeight + (moveEvent.clientY - startY)) : startHeight;
+          setSize({ width: newWidth, height: newHeight });
+        };
+        const handleMouseUp = () => {
+          document.removeEventListener("mousemove", handleMouseMove);
+          document.removeEventListener("mouseup", handleMouseUp);
+          onResize?.(size);
+        };
+        document.addEventListener("mousemove", handleMouseMove);
+        document.addEventListener("mouseup", handleMouseUp);
+      },
+      [size, onResize]
+    );
+    if (!open) return null;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      Comp,
+      {
+        ...panelProps,
+        ref: forwardedRef,
+        className: (0, import_classnames.default)("dsx-floating-panel", className),
+        "data-size": componentSize,
+        "data-dragging": isDragging || void 0,
+        style: {
+          position: "fixed",
+          left: position.x,
+          top: position.y,
+          width: size.width,
+          height: size.height,
+          ...panelProps.style
+        },
+        onMouseDown: handleMouseDown,
+        children: asChild ? children : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+          children,
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "dsx-floating-panel__close",
+              onClick: handleClose,
+              "aria-label": "Close panel",
+              "data-slot": "floating-panel-close",
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.X, { size: 16 })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FloatingPanelHandle, { direction: "se", onResize: handleResize })
+        ] })
+      }
+    );
+  }
+);
+FloatingPanel.displayName = "FloatingPanel";
+const FloatingPanelHeader = React.forwardRef(
+  ({ children, ...props }, forwardedRef) => {
+    const { asChild, className, ...headerProps } = (0, import_extractProps.extractProps)(props, import_floatingPanel.floatingPanelHeaderPropDefs);
+    const Comp = asChild ? import_react_slot.Slot : "div";
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      Comp,
+      {
+        ...headerProps,
+        ref: forwardedRef,
+        className: (0, import_classnames.default)("dsx-floating-panel__header", className),
+        "data-floating-panel-handle": true,
+        children
+      }
+    );
+  }
+);
+FloatingPanelHeader.displayName = "FloatingPanelHeader";
+const FloatingPanelContent = React.forwardRef(
+  ({ children, ...props }, forwardedRef) => {
+    const { asChild, className, ...contentProps } = (0, import_extractProps.extractProps)(props, import_floatingPanel.floatingPanelContentPropDefs);
+    const Comp = asChild ? import_react_slot.Slot : "div";
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      Comp,
+      {
+        ...contentProps,
+        ref: forwardedRef,
+        className: (0, import_classnames.default)("dsx-floating-panel__content", className),
+        children
+      }
+    );
+  }
+);
+FloatingPanelContent.displayName = "FloatingPanelContent";
+const FloatingPanelHandle = React.forwardRef(
+  ({ direction = "se", onResize, ...props }, forwardedRef) => {
+    const { asChild, className, ...handleProps } = (0, import_extractProps.extractProps)(props, import_floatingPanel.floatingPanelHandlePropDefs);
+    const Comp = asChild ? import_react_slot.Slot : "div";
+    const handleMouseDown = React.useCallback(
+      (e) => {
+        onResize?.(direction, e);
+      },
+      [direction, onResize]
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      Comp,
+      {
+        ...handleProps,
+        ref: forwardedRef,
+        className: (0, import_classnames.default)(
+          "dsx-floating-panel__handle",
+          `dsx-floating-panel__handle--${direction}`,
+          className
+        ),
+        onMouseDown: handleMouseDown
+      }
+    );
+  }
+);
+FloatingPanelHandle.displayName = "FloatingPanelHandle";
+const FloatingPanelRoot = Object.assign(FloatingPanel, {
+  Header: FloatingPanelHeader,
+  Content: FloatingPanelContent,
+  Handle: FloatingPanelHandle
+});
+//# sourceMappingURL=FloatingPanel.cjs.map

package/dist/components/floatingPanel/FloatingPanel.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/floatingPanel/FloatingPanel.tsx"],
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport classNames from 'classnames'\nimport { Slot } from '@radix-ui/react-slot'\nimport { X } from 'lucide-react'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport {\n  floatingPanelPropDefs,\n  floatingPanelHeaderPropDefs,\n  floatingPanelContentPropDefs,\n  floatingPanelHandlePropDefs,\n} from './floatingPanel.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype FloatingPanelOwnProps = GetPropDefTypes<typeof floatingPanelPropDefs>\ntype FloatingPanelHeaderOwnProps = GetPropDefTypes<typeof floatingPanelHeaderPropDefs>\ntype FloatingPanelContentOwnProps = GetPropDefTypes<typeof floatingPanelContentPropDefs>\ntype FloatingPanelHandleOwnProps = GetPropDefTypes<typeof floatingPanelHandlePropDefs>\n\ninterface Position {\n  x: number\n  y: number\n}\n\ninterface Size {\n  width: number\n  height: number\n}\n\ntype FloatingPanelProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onDragEnd'> & FloatingPanelOwnProps & {\n  defaultPosition?: Position\n  defaultSize?: Size\n  onDragEnd?: (position: Position) => void\n  onResize?: (size: Size) => void\n  onClose?: () => void\n}\n\ninterface FloatingPanelHeaderProps extends React.HTMLAttributes<HTMLDivElement>, FloatingPanelHeaderOwnProps {}\ninterface FloatingPanelContentProps extends React.HTMLAttributes<HTMLDivElement>, FloatingPanelContentOwnProps {}\ninterface FloatingPanelHandleProps extends React.HTMLAttributes<HTMLDivElement>, FloatingPanelHandleOwnProps {}\n\nconst FLOATING_PANEL_SIZE_DEFAULTS: Record<'sm' | 'md' | 'lg', Size> = {\n  sm: { width: 240, height: 180 },\n  md: { width: 320, height: 240 },\n  lg: { width: 480, height: 360 },\n}\n\nconst FloatingPanel = React.forwardRef<HTMLDivElement, FloatingPanelProps>(\n  (\n    { children, defaultPosition = { x: 0, y: 0 }, defaultSize, onDragEnd, onResize, onClose, ...props },\n    forwardedRef,\n  ) => {\n    const { asChild, className, size: componentSize = 'md', ...panelProps } = extractProps(props, floatingPanelPropDefs)\n    const Comp = asChild ? Slot : 'div'\n\n    const [open, setOpen] = React.useState(true)\n    const [position, setPosition] = React.useState<Position>(defaultPosition)\n    const [size, setSize] = React.useState<Size>(defaultSize ?? FLOATING_PANEL_SIZE_DEFAULTS[componentSize])\n    const [isDragging, setIsDragging] = React.useState(false)\n    const dragOffset = React.useRef<Position>({ x: 0, y: 0 })\n\n    const handleMouseDown = React.useCallback(\n      (e: React.MouseEvent) => {\n        if ((e.target as HTMLElement).closest('[data-floating-panel-handle]')) return\n        setIsDragging(true)\n        dragOffset.current = {\n          x: e.clientX - position.x,\n          y: e.clientY - position.y,\n        }\n      },\n      [position],\n    )\n\n    const handleClose = React.useCallback(() => {\n      setOpen(false)\n      onClose?.()\n    }, [onClose])\n\n    React.useEffect(() => {\n      if (!open) return\n      const handleKeyDown = (e: KeyboardEvent) => {\n        if (e.key === 'Escape') handleClose()\n      }\n      document.addEventListener('keydown', handleKeyDown)\n      return () => document.removeEventListener('keydown', handleKeyDown)\n    }, [open, handleClose])\n\n    React.useEffect(() => {\n      if (!isDragging) return\n\n      const handleMouseMove = (e: MouseEvent) => {\n        const newPosition = {\n          x: e.clientX - dragOffset.current.x,\n          y: e.clientY - dragOffset.current.y,\n        }\n        setPosition(newPosition)\n      }\n\n      const handleMouseUp = () => {\n        setIsDragging(false)\n        onDragEnd?.(position)\n      }\n\n      document.addEventListener('mousemove', handleMouseMove)\n      document.addEventListener('mouseup', handleMouseUp)\n\n      return () => {\n        document.removeEventListener('mousemove', handleMouseMove)\n        document.removeEventListener('mouseup', handleMouseUp)\n      }\n    }, [isDragging, onDragEnd, position])\n\n    const handleResize = React.useCallback(\n      (direction: string, e: React.MouseEvent) => {\n        e.preventDefault()\n        e.stopPropagation()\n\n        const startX = e.clientX\n        const startY = e.clientY\n        const startWidth = size.width\n        const startHeight = size.height\n\n        const handleMouseMove = (moveEvent: MouseEvent) => {\n          const newWidth = direction.includes('e') ? Math.max(150, startWidth + (moveEvent.clientX - startX)) : startWidth\n          const newHeight = direction.includes('s') ? Math.max(100, startHeight + (moveEvent.clientY - startY)) : startHeight\n          setSize({ width: newWidth, height: newHeight })\n        }\n\n        const handleMouseUp = () => {\n          document.removeEventListener('mousemove', handleMouseMove)\n          document.removeEventListener('mouseup', handleMouseUp)\n          onResize?.(size)\n        }\n\n        document.addEventListener('mousemove', handleMouseMove)\n        document.addEventListener('mouseup', handleMouseUp)\n      },\n      [size, onResize],\n    )\n\n    if (!open) return null\n\n    return (\n      <Comp\n        {...panelProps}\n        ref={forwardedRef}\n        className={classNames('dsx-floating-panel', className)}\n        data-size={componentSize}\n        data-dragging={isDragging || undefined}\n        style={{\n          position: 'fixed',\n          left: position.x,\n          top: position.y,\n          width: size.width,\n          height: size.height,\n          ...panelProps.style,\n        }}\n        onMouseDown={handleMouseDown}\n      >\n        {asChild ? children : (\n          <>\n            {children}\n            <button\n              type=\"button\"\n              className=\"dsx-floating-panel__close\"\n              onClick={handleClose}\n              aria-label=\"Close panel\"\n              data-slot=\"floating-panel-close\"\n            >\n              <X size={16} />\n            </button>\n            <FloatingPanelHandle direction=\"se\" onResize={handleResize} />\n          </>\n        )}\n      </Comp>\n    )\n  },\n)\nFloatingPanel.displayName = 'FloatingPanel'\n\nconst FloatingPanelHeader = React.forwardRef<HTMLDivElement, FloatingPanelHeaderProps>(\n  ({ children, ...props }, forwardedRef) => {\n    const { asChild, className, ...headerProps } = extractProps(props, floatingPanelHeaderPropDefs)\n    const Comp = asChild ? Slot : 'div'\n\n    return (\n      <Comp\n        {...headerProps}\n        ref={forwardedRef}\n        className={classNames('dsx-floating-panel__header', className)}\n        data-floating-panel-handle\n      >\n        {children}\n      </Comp>\n    )\n  },\n)\nFloatingPanelHeader.displayName = 'FloatingPanelHeader'\n\nconst FloatingPanelContent = React.forwardRef<HTMLDivElement, FloatingPanelContentProps>(\n  ({ children, ...props }, forwardedRef) => {\n    const { asChild, className, ...contentProps } = extractProps(props, floatingPanelContentPropDefs)\n    const Comp = asChild ? Slot : 'div'\n\n    return (\n      <Comp\n        {...contentProps}\n        ref={forwardedRef}\n        className={classNames('dsx-floating-panel__content', className)}\n      >\n        {children}\n      </Comp>\n    )\n  },\n)\nFloatingPanelContent.displayName = 'FloatingPanelContent'\n\ninterface FloatingPanelHandleInternalProps extends FloatingPanelHandleProps {\n  onResize?: (direction: string, e: React.MouseEvent) => void\n}\n\nconst FloatingPanelHandle = React.forwardRef<HTMLDivElement, FloatingPanelHandleInternalProps>(\n  ({ direction = 'se', onResize, ...props }, forwardedRef) => {\n    const { asChild, className, ...handleProps } = extractProps(props, floatingPanelHandlePropDefs)\n    const Comp = asChild ? Slot : 'div'\n\n    const handleMouseDown = React.useCallback(\n      (e: React.MouseEvent) => {\n        onResize?.(direction, e)\n      },\n      [direction, onResize],\n    )\n\n    return (\n      <Comp\n        {...handleProps}\n        ref={forwardedRef}\n        className={classNames(\n          'dsx-floating-panel__handle',\n          `dsx-floating-panel__handle--${direction}`,\n          className,\n        )}\n        onMouseDown={handleMouseDown}\n      />\n    )\n  },\n)\nFloatingPanelHandle.displayName = 'FloatingPanelHandle'\n\nconst FloatingPanelRoot: typeof FloatingPanel & {\n  Header: typeof FloatingPanelHeader\n  Content: typeof FloatingPanelContent\n  Handle: typeof FloatingPanelHandle\n} = Object.assign(FloatingPanel, {\n  Header: FloatingPanelHeader,\n  Content: FloatingPanelContent,\n  Handle: FloatingPanelHandle,\n})\n\nexport { FloatingPanelRoot as FloatingPanel, FloatingPanelHeader, FloatingPanelContent, FloatingPanelHandle }\nexport type { FloatingPanelProps, FloatingPanelHeaderProps, FloatingPanelContentProps, FloatingPanelHandleProps, Position, Size }\n"],
+  "mappings": "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",
+  "names": ["classNames"]
+}

package/dist/components/floatingPanel/FloatingPanel.d.cts

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { floatingPanelPropDefs, floatingPanelHeaderPropDefs, floatingPanelContentPropDefs, floatingPanelHandlePropDefs } from './floatingPanel.props.cjs';
+import type { GetPropDefTypes } from '../../_internal/props/propDef.cjs';
+type FloatingPanelOwnProps = GetPropDefTypes<typeof floatingPanelPropDefs>;
+type FloatingPanelHeaderOwnProps = GetPropDefTypes<typeof floatingPanelHeaderPropDefs>;
+type FloatingPanelContentOwnProps = GetPropDefTypes<typeof floatingPanelContentPropDefs>;
+type FloatingPanelHandleOwnProps = GetPropDefTypes<typeof floatingPanelHandlePropDefs>;
+interface Position {
+    x: number;
+    y: number;
+}
+interface Size {
+    width: number;
+    height: number;
+}
+type FloatingPanelProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onDragEnd'> & FloatingPanelOwnProps & {
+    defaultPosition?: Position;
+    defaultSize?: Size;
+    onDragEnd?: (position: Position) => void;
+    onResize?: (size: Size) => void;
+    onClose?: () => void;
+};
+interface FloatingPanelHeaderProps extends React.HTMLAttributes<HTMLDivElement>, FloatingPanelHeaderOwnProps {
+}
+interface FloatingPanelContentProps extends React.HTMLAttributes<HTMLDivElement>, FloatingPanelContentOwnProps {
+}
+interface FloatingPanelHandleProps extends React.HTMLAttributes<HTMLDivElement>, FloatingPanelHandleOwnProps {
+}
+declare const FloatingPanel: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "onDragEnd"> & GetPropDefTypes<{
+    size: {
+        type: "enum";
+        values: readonly ["sm", "md", "lg"];
+        default: "md";
+    };
+    asChild: {
+        type: "boolean";
+        default: false;
+    };
+}> & {
+    defaultPosition?: Position;
+    defaultSize?: Size;
+    onDragEnd?: (position: Position) => void;
+    onResize?: (size: Size) => void;
+    onClose?: () => void;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const FloatingPanelHeader: React.ForwardRefExoticComponent<FloatingPanelHeaderProps & React.RefAttributes<HTMLDivElement>>;
+declare const FloatingPanelContent: React.ForwardRefExoticComponent<FloatingPanelContentProps & React.RefAttributes<HTMLDivElement>>;
+interface FloatingPanelHandleInternalProps extends FloatingPanelHandleProps {
+    onResize?: (direction: string, e: React.MouseEvent) => void;
+}
+declare const FloatingPanelHandle: React.ForwardRefExoticComponent<FloatingPanelHandleInternalProps & React.RefAttributes<HTMLDivElement>>;
+declare const FloatingPanelRoot: typeof FloatingPanel & {
+    Header: typeof FloatingPanelHeader;
+    Content: typeof FloatingPanelContent;
+    Handle: typeof FloatingPanelHandle;
+};
+export { FloatingPanelRoot as FloatingPanel, FloatingPanelHeader, FloatingPanelContent, FloatingPanelHandle };
+export type { FloatingPanelProps, FloatingPanelHeaderProps, FloatingPanelContentProps, FloatingPanelHandleProps, Position, Size };
+//# sourceMappingURL=FloatingPanel.d.cts.map

package/dist/components/floatingPanel/FloatingPanel.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingPanel.d.cts","sourceRoot":"","sources":["../../../src/components/floatingPanel/FloatingPanel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,EACL,qBAAqB,EACrB,2BAA2B,EAC3B,4BAA4B,EAC5B,2BAA2B,EAC5B,MAAM,uBAAuB,CAAA;AAE9B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAEpE,KAAK,qBAAqB,GAAG,eAAe,CAAC,OAAO,qBAAqB,CAAC,CAAA;AAC1E,KAAK,2BAA2B,GAAG,eAAe,CAAC,OAAO,2BAA2B,CAAC,CAAA;AACtF,KAAK,4BAA4B,GAAG,eAAe,CAAC,OAAO,4BAA4B,CAAC,CAAA;AACxF,KAAK,2BAA2B,GAAG,eAAe,CAAC,OAAO,2BAA2B,CAAC,CAAA;AAEtF,UAAU,QAAQ;IAChB,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;CACV;AAED,UAAU,IAAI;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;CACf;AAED,KAAK,kBAAkB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,WAAW,CAAC,GAAG,qBAAqB,GAAG;IAC1G,eAAe,CAAC,EAAE,QAAQ,CAAA;IAC1B,WAAW,CAAC,EAAE,IAAI,CAAA;IAClB,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAA;IACxC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAA;IAC/B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB,CAAA;AAED,UAAU,wBAAyB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,2BAA2B;CAAG;AAC/G,UAAU,yBAA0B,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,4BAA4B;CAAG;AACjH,UAAU,wBAAyB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,2BAA2B;CAAG;AAQ/G,QAAA,MAAM,aAAa;;;;;;;;;;;sBAjBC,QAAQ;kBACZ,IAAI;gBACN,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI;eAC7B,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI;cACrB,MAAM,IAAI;wCA+IrB,CAAA;AAGD,QAAA,MAAM,mBAAmB,iGAgBxB,CAAA;AAGD,QAAA,MAAM,oBAAoB,kGAezB,CAAA;AAGD,UAAU,gCAAiC,SAAQ,wBAAwB;IACzE,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAA;CAC5D;AAED,QAAA,MAAM,mBAAmB,yGAyBxB,CAAA;AAGD,QAAA,MAAM,iBAAiB,EAAE,OAAO,aAAa,GAAG;IAC9C,MAAM,EAAE,OAAO,mBAAmB,CAAA;IAClC,OAAO,EAAE,OAAO,oBAAoB,CAAA;IACpC,MAAM,EAAE,OAAO,mBAAmB,CAAA;CAKlC,CAAA;AAEF,OAAO,EAAE,iBAAiB,IAAI,aAAa,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,CAAA;AAC7G,YAAY,EAAE,kBAAkB,EAAE,wBAAwB,EAAE,yBAAyB,EAAE,wBAAwB,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAA"}

package/dist/components/floatingPanel/FloatingPanel.d.mts

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { floatingPanelPropDefs, floatingPanelHeaderPropDefs, floatingPanelContentPropDefs, floatingPanelHandlePropDefs } from './floatingPanel.props.js';
+import type { GetPropDefTypes } from '../../_internal/props/propDef.js';
+type FloatingPanelOwnProps = GetPropDefTypes<typeof floatingPanelPropDefs>;
+type FloatingPanelHeaderOwnProps = GetPropDefTypes<typeof floatingPanelHeaderPropDefs>;
+type FloatingPanelContentOwnProps = GetPropDefTypes<typeof floatingPanelContentPropDefs>;
+type FloatingPanelHandleOwnProps = GetPropDefTypes<typeof floatingPanelHandlePropDefs>;
+interface Position {
+    x: number;
+    y: number;
+}
+interface Size {
+    width: number;
+    height: number;
+}
+type FloatingPanelProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onDragEnd'> & FloatingPanelOwnProps & {
+    defaultPosition?: Position;
+    defaultSize?: Size;
+    onDragEnd?: (position: Position) => void;
+    onResize?: (size: Size) => void;
+    onClose?: () => void;
+};
+interface FloatingPanelHeaderProps extends React.HTMLAttributes<HTMLDivElement>, FloatingPanelHeaderOwnProps {
+}
+interface FloatingPanelContentProps extends React.HTMLAttributes<HTMLDivElement>, FloatingPanelContentOwnProps {
+}
+interface FloatingPanelHandleProps extends React.HTMLAttributes<HTMLDivElement>, FloatingPanelHandleOwnProps {
+}
+declare const FloatingPanel: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "onDragEnd"> & GetPropDefTypes<{
+    size: {
+        type: "enum";
+        values: readonly ["sm", "md", "lg"];
+        default: "md";
+    };
+    asChild: {
+        type: "boolean";
+        default: false;
+    };
+}> & {
+    defaultPosition?: Position;
+    defaultSize?: Size;
+    onDragEnd?: (position: Position) => void;
+    onResize?: (size: Size) => void;
+    onClose?: () => void;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const FloatingPanelHeader: React.ForwardRefExoticComponent<FloatingPanelHeaderProps & React.RefAttributes<HTMLDivElement>>;
+declare const FloatingPanelContent: React.ForwardRefExoticComponent<FloatingPanelContentProps & React.RefAttributes<HTMLDivElement>>;
+interface FloatingPanelHandleInternalProps extends FloatingPanelHandleProps {
+    onResize?: (direction: string, e: React.MouseEvent) => void;
+}
+declare const FloatingPanelHandle: React.ForwardRefExoticComponent<FloatingPanelHandleInternalProps & React.RefAttributes<HTMLDivElement>>;
+declare const FloatingPanelRoot: typeof FloatingPanel & {
+    Header: typeof FloatingPanelHeader;
+    Content: typeof FloatingPanelContent;
+    Handle: typeof FloatingPanelHandle;
+};
+export { FloatingPanelRoot as FloatingPanel, FloatingPanelHeader, FloatingPanelContent, FloatingPanelHandle };
+export type { FloatingPanelProps, FloatingPanelHeaderProps, FloatingPanelContentProps, FloatingPanelHandleProps, Position, Size };
+//# sourceMappingURL=FloatingPanel.d.mts.map

package/dist/components/floatingPanel/FloatingPanel.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingPanel.d.mts","sourceRoot":"","sources":["../../../src/components/floatingPanel/FloatingPanel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,EACL,qBAAqB,EACrB,2BAA2B,EAC3B,4BAA4B,EAC5B,2BAA2B,EAC5B,MAAM,uBAAuB,CAAA;AAE9B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAEpE,KAAK,qBAAqB,GAAG,eAAe,CAAC,OAAO,qBAAqB,CAAC,CAAA;AAC1E,KAAK,2BAA2B,GAAG,eAAe,CAAC,OAAO,2BAA2B,CAAC,CAAA;AACtF,KAAK,4BAA4B,GAAG,eAAe,CAAC,OAAO,4BAA4B,CAAC,CAAA;AACxF,KAAK,2BAA2B,GAAG,eAAe,CAAC,OAAO,2BAA2B,CAAC,CAAA;AAEtF,UAAU,QAAQ;IAChB,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;CACV;AAED,UAAU,IAAI;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;CACf;AAED,KAAK,kBAAkB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,WAAW,CAAC,GAAG,qBAAqB,GAAG;IAC1G,eAAe,CAAC,EAAE,QAAQ,CAAA;IAC1B,WAAW,CAAC,EAAE,IAAI,CAAA;IAClB,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAA;IACxC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAA;IAC/B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB,CAAA;AAED,UAAU,wBAAyB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,2BAA2B;CAAG;AAC/G,UAAU,yBAA0B,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,4BAA4B;CAAG;AACjH,UAAU,wBAAyB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,2BAA2B;CAAG;AAQ/G,QAAA,MAAM,aAAa;;;;;;;;;;;sBAjBC,QAAQ;kBACZ,IAAI;gBACN,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI;eAC7B,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI;cACrB,MAAM,IAAI;wCA+IrB,CAAA;AAGD,QAAA,MAAM,mBAAmB,iGAgBxB,CAAA;AAGD,QAAA,MAAM,oBAAoB,kGAezB,CAAA;AAGD,UAAU,gCAAiC,SAAQ,wBAAwB;IACzE,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAA;CAC5D;AAED,QAAA,MAAM,mBAAmB,yGAyBxB,CAAA;AAGD,QAAA,MAAM,iBAAiB,EAAE,OAAO,aAAa,GAAG;IAC9C,MAAM,EAAE,OAAO,mBAAmB,CAAA;IAClC,OAAO,EAAE,OAAO,oBAAoB,CAAA;IACpC,MAAM,EAAE,OAAO,mBAAmB,CAAA;CAKlC,CAAA;AAEF,OAAO,EAAE,iBAAiB,IAAI,aAAa,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,CAAA;AAC7G,YAAY,EAAE,kBAAkB,EAAE,wBAAwB,EAAE,yBAAyB,EAAE,wBAAwB,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAA"}

package/dist/components/floatingPanel/FloatingPanel.d.ts

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { floatingPanelPropDefs, floatingPanelHeaderPropDefs, floatingPanelContentPropDefs, floatingPanelHandlePropDefs } from './floatingPanel.props.js';
+import type { GetPropDefTypes } from '../../_internal/props/propDef.js';
+type FloatingPanelOwnProps = GetPropDefTypes<typeof floatingPanelPropDefs>;
+type FloatingPanelHeaderOwnProps = GetPropDefTypes<typeof floatingPanelHeaderPropDefs>;
+type FloatingPanelContentOwnProps = GetPropDefTypes<typeof floatingPanelContentPropDefs>;
+type FloatingPanelHandleOwnProps = GetPropDefTypes<typeof floatingPanelHandlePropDefs>;
+interface Position {
+    x: number;
+    y: number;
+}
+interface Size {
+    width: number;
+    height: number;
+}
+type FloatingPanelProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onDragEnd'> & FloatingPanelOwnProps & {
+    defaultPosition?: Position;
+    defaultSize?: Size;
+    onDragEnd?: (position: Position) => void;
+    onResize?: (size: Size) => void;
+    onClose?: () => void;
+};
+interface FloatingPanelHeaderProps extends React.HTMLAttributes<HTMLDivElement>, FloatingPanelHeaderOwnProps {
+}
+interface FloatingPanelContentProps extends React.HTMLAttributes<HTMLDivElement>, FloatingPanelContentOwnProps {
+}
+interface FloatingPanelHandleProps extends React.HTMLAttributes<HTMLDivElement>, FloatingPanelHandleOwnProps {
+}
+declare const FloatingPanel: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "onDragEnd"> & GetPropDefTypes<{
+    size: {
+        type: "enum";
+        values: readonly ["sm", "md", "lg"];
+        default: "md";
+    };
+    asChild: {
+        type: "boolean";
+        default: false;
+    };
+}> & {
+    defaultPosition?: Position;
+    defaultSize?: Size;
+    onDragEnd?: (position: Position) => void;
+    onResize?: (size: Size) => void;
+    onClose?: () => void;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const FloatingPanelHeader: React.ForwardRefExoticComponent<FloatingPanelHeaderProps & React.RefAttributes<HTMLDivElement>>;
+declare const FloatingPanelContent: React.ForwardRefExoticComponent<FloatingPanelContentProps & React.RefAttributes<HTMLDivElement>>;
+interface FloatingPanelHandleInternalProps extends FloatingPanelHandleProps {
+    onResize?: (direction: string, e: React.MouseEvent) => void;
+}
+declare const FloatingPanelHandle: React.ForwardRefExoticComponent<FloatingPanelHandleInternalProps & React.RefAttributes<HTMLDivElement>>;
+declare const FloatingPanelRoot: typeof FloatingPanel & {
+    Header: typeof FloatingPanelHeader;
+    Content: typeof FloatingPanelContent;
+    Handle: typeof FloatingPanelHandle;
+};
+export { FloatingPanelRoot as FloatingPanel, FloatingPanelHeader, FloatingPanelContent, FloatingPanelHandle };
+export type { FloatingPanelProps, FloatingPanelHeaderProps, FloatingPanelContentProps, FloatingPanelHandleProps, Position, Size };
+//# sourceMappingURL=FloatingPanel.d.ts.map

package/dist/components/floatingPanel/FloatingPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingPanel.d.ts","sourceRoot":"","sources":["../../../src/components/floatingPanel/FloatingPanel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,EACL,qBAAqB,EACrB,2BAA2B,EAC3B,4BAA4B,EAC5B,2BAA2B,EAC5B,MAAM,uBAAuB,CAAA;AAE9B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAEpE,KAAK,qBAAqB,GAAG,eAAe,CAAC,OAAO,qBAAqB,CAAC,CAAA;AAC1E,KAAK,2BAA2B,GAAG,eAAe,CAAC,OAAO,2BAA2B,CAAC,CAAA;AACtF,KAAK,4BAA4B,GAAG,eAAe,CAAC,OAAO,4BAA4B,CAAC,CAAA;AACxF,KAAK,2BAA2B,GAAG,eAAe,CAAC,OAAO,2BAA2B,CAAC,CAAA;AAEtF,UAAU,QAAQ;IAChB,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;CACV;AAED,UAAU,IAAI;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;CACf;AAED,KAAK,kBAAkB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,WAAW,CAAC,GAAG,qBAAqB,GAAG;IAC1G,eAAe,CAAC,EAAE,QAAQ,CAAA;IAC1B,WAAW,CAAC,EAAE,IAAI,CAAA;IAClB,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAA;IACxC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAA;IAC/B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB,CAAA;AAED,UAAU,wBAAyB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,2BAA2B;CAAG;AAC/G,UAAU,yBAA0B,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,4BAA4B;CAAG;AACjH,UAAU,wBAAyB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,2BAA2B;CAAG;AAQ/G,QAAA,MAAM,aAAa;;;;;;;;;;;sBAjBC,QAAQ;kBACZ,IAAI;gBACN,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI;eAC7B,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI;cACrB,MAAM,IAAI;wCA+IrB,CAAA;AAGD,QAAA,MAAM,mBAAmB,iGAgBxB,CAAA;AAGD,QAAA,MAAM,oBAAoB,kGAezB,CAAA;AAGD,UAAU,gCAAiC,SAAQ,wBAAwB;IACzE,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAA;CAC5D;AAED,QAAA,MAAM,mBAAmB,yGAyBxB,CAAA;AAGD,QAAA,MAAM,iBAAiB,EAAE,OAAO,aAAa,GAAG;IAC9C,MAAM,EAAE,OAAO,mBAAmB,CAAA;IAClC,OAAO,EAAE,OAAO,oBAAoB,CAAA;IACpC,MAAM,EAAE,OAAO,mBAAmB,CAAA;CAKlC,CAAA;AAEF,OAAO,EAAE,iBAAiB,IAAI,aAAa,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,CAAA;AAC7G,YAAY,EAAE,kBAAkB,EAAE,wBAAwB,EAAE,yBAAyB,EAAE,wBAAwB,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAA"}

package/dist/components/floatingPanel/FloatingPanel.js

@@ -0,0 +1,202 @@
+"use client";
+import * as React from "react";
+import classNames from "classnames";
+import { Slot } from "@radix-ui/react-slot";
+import { X } from "lucide-react";
+import { extractProps } from "../../_internal/helpers/extractProps.js";
+import {
+  floatingPanelPropDefs,
+  floatingPanelHeaderPropDefs,
+  floatingPanelContentPropDefs,
+  floatingPanelHandlePropDefs
+} from "./floatingPanel.props.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+const FLOATING_PANEL_SIZE_DEFAULTS = {
+  sm: { width: 240, height: 180 },
+  md: { width: 320, height: 240 },
+  lg: { width: 480, height: 360 }
+};
+const FloatingPanel = React.forwardRef(
+  ({ children, defaultPosition = { x: 0, y: 0 }, defaultSize, onDragEnd, onResize, onClose, ...props }, forwardedRef) => {
+    const { asChild, className, size: componentSize = "md", ...panelProps } = extractProps(props, floatingPanelPropDefs);
+    const Comp = asChild ? Slot : "div";
+    const [open, setOpen] = React.useState(true);
+    const [position, setPosition] = React.useState(defaultPosition);
+    const [size, setSize] = React.useState(defaultSize ?? FLOATING_PANEL_SIZE_DEFAULTS[componentSize]);
+    const [isDragging, setIsDragging] = React.useState(false);
+    const dragOffset = React.useRef({ x: 0, y: 0 });
+    const handleMouseDown = React.useCallback(
+      (e) => {
+        if (e.target.closest("[data-floating-panel-handle]")) return;
+        setIsDragging(true);
+        dragOffset.current = {
+          x: e.clientX - position.x,
+          y: e.clientY - position.y
+        };
+      },
+      [position]
+    );
+    const handleClose = React.useCallback(() => {
+      setOpen(false);
+      onClose?.();
+    }, [onClose]);
+    React.useEffect(() => {
+      if (!open) return;
+      const handleKeyDown = (e) => {
+        if (e.key === "Escape") handleClose();
+      };
+      document.addEventListener("keydown", handleKeyDown);
+      return () => document.removeEventListener("keydown", handleKeyDown);
+    }, [open, handleClose]);
+    React.useEffect(() => {
+      if (!isDragging) return;
+      const handleMouseMove = (e) => {
+        const newPosition = {
+          x: e.clientX - dragOffset.current.x,
+          y: e.clientY - dragOffset.current.y
+        };
+        setPosition(newPosition);
+      };
+      const handleMouseUp = () => {
+        setIsDragging(false);
+        onDragEnd?.(position);
+      };
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+      return () => {
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+      };
+    }, [isDragging, onDragEnd, position]);
+    const handleResize = React.useCallback(
+      (direction, e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        const startX = e.clientX;
+        const startY = e.clientY;
+        const startWidth = size.width;
+        const startHeight = size.height;
+        const handleMouseMove = (moveEvent) => {
+          const newWidth = direction.includes("e") ? Math.max(150, startWidth + (moveEvent.clientX - startX)) : startWidth;
+          const newHeight = direction.includes("s") ? Math.max(100, startHeight + (moveEvent.clientY - startY)) : startHeight;
+          setSize({ width: newWidth, height: newHeight });
+        };
+        const handleMouseUp = () => {
+          document.removeEventListener("mousemove", handleMouseMove);
+          document.removeEventListener("mouseup", handleMouseUp);
+          onResize?.(size);
+        };
+        document.addEventListener("mousemove", handleMouseMove);
+        document.addEventListener("mouseup", handleMouseUp);
+      },
+      [size, onResize]
+    );
+    if (!open) return null;
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        ...panelProps,
+        ref: forwardedRef,
+        className: classNames("dsx-floating-panel", className),
+        "data-size": componentSize,
+        "data-dragging": isDragging || void 0,
+        style: {
+          position: "fixed",
+          left: position.x,
+          top: position.y,
+          width: size.width,
+          height: size.height,
+          ...panelProps.style
+        },
+        onMouseDown: handleMouseDown,
+        children: asChild ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+          children,
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "dsx-floating-panel__close",
+              onClick: handleClose,
+              "aria-label": "Close panel",
+              "data-slot": "floating-panel-close",
+              children: /* @__PURE__ */ jsx(X, { size: 16 })
+            }
+          ),
+          /* @__PURE__ */ jsx(FloatingPanelHandle, { direction: "se", onResize: handleResize })
+        ] })
+      }
+    );
+  }
+);
+FloatingPanel.displayName = "FloatingPanel";
+const FloatingPanelHeader = React.forwardRef(
+  ({ children, ...props }, forwardedRef) => {
+    const { asChild, className, ...headerProps } = extractProps(props, floatingPanelHeaderPropDefs);
+    const Comp = asChild ? Slot : "div";
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        ...headerProps,
+        ref: forwardedRef,
+        className: classNames("dsx-floating-panel__header", className),
+        "data-floating-panel-handle": true,
+        children
+      }
+    );
+  }
+);
+FloatingPanelHeader.displayName = "FloatingPanelHeader";
+const FloatingPanelContent = React.forwardRef(
+  ({ children, ...props }, forwardedRef) => {
+    const { asChild, className, ...contentProps } = extractProps(props, floatingPanelContentPropDefs);
+    const Comp = asChild ? Slot : "div";
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        ...contentProps,
+        ref: forwardedRef,
+        className: classNames("dsx-floating-panel__content", className),
+        children
+      }
+    );
+  }
+);
+FloatingPanelContent.displayName = "FloatingPanelContent";
+const FloatingPanelHandle = React.forwardRef(
+  ({ direction = "se", onResize, ...props }, forwardedRef) => {
+    const { asChild, className, ...handleProps } = extractProps(props, floatingPanelHandlePropDefs);
+    const Comp = asChild ? Slot : "div";
+    const handleMouseDown = React.useCallback(
+      (e) => {
+        onResize?.(direction, e);
+      },
+      [direction, onResize]
+    );
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        ...handleProps,
+        ref: forwardedRef,
+        className: classNames(
+          "dsx-floating-panel__handle",
+          `dsx-floating-panel__handle--${direction}`,
+          className
+        ),
+        onMouseDown: handleMouseDown
+      }
+    );
+  }
+);
+FloatingPanelHandle.displayName = "FloatingPanelHandle";
+const FloatingPanelRoot = Object.assign(FloatingPanel, {
+  Header: FloatingPanelHeader,
+  Content: FloatingPanelContent,
+  Handle: FloatingPanelHandle
+});
+export {
+  FloatingPanelRoot as FloatingPanel,
+  FloatingPanelContent,
+  FloatingPanelHandle,
+  FloatingPanelHeader
+};
+//# sourceMappingURL=FloatingPanel.js.map