@puzzle-ui/ui 0.0.0-stage → 0.1.0

package/dist/components/overlays/dialog/index.js

@@ -0,0 +1,80 @@
+"use client";
+import "./dialog.css";
+import { Transition } from "../../utilities/transition/index.js";
+import { Backdrop } from "../backdrop/index.js";
+import { Portal } from "../portal/index.js";
+import { cn } from "@puzzle-ui/core";
+import { useCallback, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/overlays/dialog/index.tsx
+const Dialog = ({ open, onOpenChange, title, description, children, footer, size = "md", closeButton = true, closeLabel = "Close dialog", closeOnBackdrop = true, closeOnEscape = true, className, onClick, onClose, "aria-describedby": externalDescriptionId, ...props }) => {
+	const titleId = useId();
+	const descriptionId = useId();
+	const handleClose = useCallback(() => {
+		onOpenChange(false);
+		onClose?.();
+	}, [onOpenChange, onClose]);
+	const handleClick = (event) => {
+		onClick?.(event);
+	};
+	const describedBy = [description ? descriptionId : void 0, externalDescriptionId].filter(Boolean).join(" ") || void 0;
+	return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Backdrop, {
+		open,
+		modal: true,
+		closeOnBackdrop,
+		closeOnEscape,
+		onClose: handleClose,
+		children: /* @__PURE__ */ jsx(Transition, {
+			template: "slide-in-up",
+			visible: open,
+			children: /* @__PURE__ */ jsxs("div", {
+				...props,
+				"data-overlay-content": "",
+				tabIndex: -1,
+				className: cn("puzzle-dialog", `puzzle-dialog--${size}`, className),
+				role: "dialog",
+				"aria-modal": "true",
+				"aria-labelledby": titleId,
+				"aria-describedby": describedBy,
+				onClick: handleClick,
+				children: [
+					/* @__PURE__ */ jsxs("header", {
+						className: "puzzle-dialog__header",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "puzzle-dialog__heading",
+							children: [/* @__PURE__ */ jsx("h2", {
+								id: titleId,
+								className: "puzzle-dialog__title",
+								children: title
+							}), description && /* @__PURE__ */ jsx("p", {
+								id: descriptionId,
+								className: "puzzle-dialog__description",
+								children: description
+							})]
+						}), closeButton && /* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: "puzzle-dialog__close",
+							"aria-label": closeLabel,
+							onClick: handleClose,
+							children: /* @__PURE__ */ jsx("span", {
+								"aria-hidden": "true",
+								children: "×"
+							})
+						})]
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "puzzle-dialog__body",
+						children
+					}),
+					footer != null && /* @__PURE__ */ jsx("footer", {
+						className: "puzzle-dialog__footer",
+						children: footer
+					})
+				]
+			})
+		})
+	}) });
+};
+export { Dialog };
+
+//# sourceMappingURL=index.js.map

package/dist/components/overlays/dialog/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/overlays/dialog/index.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  useCallback,\n  useId,\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n  type MouseEventHandler,\n} from \"react\";\n\nimport { cn } from \"@puzzle-ui/core\";\n\nimport \"./dialog.css\";\n\nimport { Transition } from \"../../utilities/transition\";\nimport { Backdrop } from \"../backdrop\";\nimport { Portal } from \"../portal\";\n\ntype DialogSize = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\";\n\ntype NativeDialogProps = Omit<\n  ComponentPropsWithoutRef<\"div\">,\n  | \"open\"\n  | \"children\"\n  | \"onCancel\"\n  | \"onClose\"\n  | \"onClick\"\n  | \"aria-labelledby\"\n  | \"aria-describedby\"\n  | \"aria-label\"\n  | \"aria-modal\"\n  | \"role\"\n  | \"tabIndex\"\n>;\n\ntype DialogProps = NativeDialogProps & {\n  /** Whether the dialog is open. */\n  open: boolean;\n\n  /** Called when the dialog requests a change in its open state. */\n  onOpenChange: (open: boolean) => void;\n\n  /** Required accessible heading for the dialog. */\n  title: ReactNode;\n\n  /** Short, optional description. */\n  description?: string;\n\n  /** Main dialog content. */\n  children?: ReactNode;\n\n  /** Optional footer. */\n  footer?: ReactNode;\n\n  /** Maximum dialog width preset. */\n  size?: DialogSize;\n\n  /** Whether to render a close button. */\n  closeButton?: boolean;\n\n  /** Accessible label for the close button. */\n  closeLabel?: string;\n\n  /** Whether clicking the backdrop requests closing. */\n  closeOnBackdrop?: boolean;\n\n  /** Whether pressing Escape requests closing. */\n  closeOnEscape?: boolean;\n\n  /** Optional native click handler. */\n  onClick?: MouseEventHandler<HTMLElement>;\n\n  /** Called when the dialog is closed. */\n  onClose?: () => void;\n\n  /** Additional IDs describing the dialog. */\n  \"aria-describedby\"?: string;\n};\n\nconst Dialog = ({\n  open,\n  onOpenChange,\n  title,\n  description,\n  children,\n  footer,\n  size = \"md\",\n  closeButton = true,\n  closeLabel = \"Close dialog\",\n  closeOnBackdrop = true,\n  closeOnEscape = true,\n  className,\n  onClick,\n  onClose,\n  \"aria-describedby\": externalDescriptionId,\n  ...props\n}: DialogProps) => {\n  const titleId = useId();\n  const descriptionId = useId();\n\n  const handleClose = useCallback(() => {\n    onOpenChange(false);\n    onClose?.();\n  }, [onOpenChange, onClose]);\n\n  const handleClick: MouseEventHandler<HTMLElement> = (event) => {\n    onClick?.(event);\n  };\n\n  const describedBy =\n    [description ? descriptionId : undefined, externalDescriptionId]\n      .filter(Boolean)\n      .join(\" \") || undefined;\n\n  return (\n    <Portal>\n      <Backdrop\n        open={open}\n        modal\n        closeOnBackdrop={closeOnBackdrop}\n        closeOnEscape={closeOnEscape}\n        onClose={handleClose}\n      >\n        <Transition template=\"slide-in-up\" visible={open}>\n          <div\n            {...props}\n            data-overlay-content=\"\"\n            tabIndex={-1}\n            className={cn(\"puzzle-dialog\", `puzzle-dialog--${size}`, className)}\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-labelledby={titleId}\n            aria-describedby={describedBy}\n            onClick={handleClick}\n          >\n            <header className=\"puzzle-dialog__header\">\n              <div className=\"puzzle-dialog__heading\">\n                <h2 id={titleId} className=\"puzzle-dialog__title\">\n                  {title}\n                </h2>\n\n                {description && (\n                  <p id={descriptionId} className=\"puzzle-dialog__description\">\n                    {description}\n                  </p>\n                )}\n              </div>\n\n              {closeButton && (\n                <button\n                  type=\"button\"\n                  className=\"puzzle-dialog__close\"\n                  aria-label={closeLabel}\n                  onClick={handleClose}\n                >\n                  <span aria-hidden=\"true\">&times;</span>\n                </button>\n              )}\n            </header>\n\n            <div className=\"puzzle-dialog__body\">{children}</div>\n\n            {footer != null && (\n              <footer className=\"puzzle-dialog__footer\">{footer}</footer>\n            )}\n          </div>\n        </Transition>\n      </Backdrop>\n    </Portal>\n  );\n};\n\nexport { Dialog, type DialogProps };\n"],"mappings":";;;;;;;;;AA+EA,MAAM,UAAU,EACd,MACA,cACA,OACA,aACA,UACA,QACA,OAAO,MACP,cAAc,MACd,aAAa,gBACb,kBAAkB,MAClB,gBAAgB,MAChB,WACA,SACA,SACA,oBAAoB,uBACpB,GAAG,YACc;CACjB,MAAM,UAAU,MAAM;CACtB,MAAM,gBAAgB,MAAM;CAE5B,MAAM,cAAc,kBAAkB;EACpC,aAAa,KAAK;EAClB,UAAU;CACZ,GAAG,CAAC,cAAc,OAAO,CAAC;CAE1B,MAAM,eAA+C,UAAU;EAC7D,UAAU,KAAK;CACjB;CAEA,MAAM,cACJ,CAAC,cAAc,gBAAgB,KAAA,GAAW,qBAAqB,CAAC,CAC7D,OAAO,OAAO,CAAC,CACf,KAAK,GAAG,KAAK,KAAA;CAElB,OACE,oBAAC,QAAD,EAAA,UACE,oBAAC,UAAD;EACQ;EACN,OAAA;EACiB;EACF;EACf,SAAS;EAET,UAAA,oBAAC,YAAD;GAAY,UAAS;GAAc,SAAS;GAC1C,UAAA,qBAAC,OAAD;IACE,GAAI;IACJ,wBAAqB;IACrB,UAAU;IACV,WAAW,GAAG,iBAAiB,kBAAkB,QAAQ,SAAS;IAClE,MAAK;IACL,cAAW;IACX,mBAAiB;IACjB,oBAAkB;IAClB,SAAS;IATX,UAAA;KAWE,qBAAC,UAAD;MAAQ,WAAU;MAAlB,UAAA,CACE,qBAAC,OAAD;OAAK,WAAU;OAAf,UAAA,CACE,oBAAC,MAAD;QAAI,IAAI;QAAS,WAAU;QACxB,UAAA;OACC,CAAA,GAEH,eACC,oBAAC,KAAD;QAAG,IAAI;QAAe,WAAU;QAC7B,UAAA;OACA,CAAA,CAEF;MAEJ,CAAA,GAAA,eACC,oBAAC,UAAD;OACE,MAAK;OACL,WAAU;OACV,cAAY;OACZ,SAAS;OAET,UAAA,oBAAC,QAAD;QAAM,eAAY;QAAO,UAAA;OAAa,CAAA;MAChC,CAAA,CAEJ;;KAER,oBAAC,OAAD;MAAK,WAAU;MAAuB;KAAc,CAAA;KAEnD,UAAU,QACT,oBAAC,UAAD;MAAQ,WAAU;MAAyB,UAAA;KAAe,CAAA;IAEzD;;EACK,CAAA;CACJ,CAAA,EACJ,CAAA;AAEZ"}

package/dist/components/overlays/drawer/drawer.css

@@ -0,0 +1,133 @@
+.puzzle-drawer {
+  z-index: var(--puzzle-z-index-modal, 1300);
+  color: var(--puzzle-color-text, #171717);
+  background-color: var(--puzzle-color-surface, #fff);
+  box-shadow: var(--puzzle-elevation-8, 0 25px 50px -12px #0003);
+  flex-direction: column;
+  display: flex;
+  position: fixed;
+  overflow: hidden;
+}
+
+.puzzle-drawer__resize-bar {
+  padding: var(--puzzle-space-4, 1rem);
+  touch-action: none;
+}
+
+.puzzle-drawer__resize-bar:focus-visible {
+  outline: 2px solid var(--puzzle-color-ring);
+  outline-offset: -2px;
+}
+
+.puzzle-drawer__resize-bar-inner {
+  border-radius: var(--puzzle-radius-sm, .25rem);
+  display: block;
+}
+
+.puzzle-drawer--top .puzzle-drawer__resize-bar, .puzzle-drawer--bottom .puzzle-drawer__resize-bar {
+  cursor: row-resize;
+  width: 128px;
+  margin: 0 auto;
+}
+
+.puzzle-drawer--top .puzzle-drawer__resize-bar-inner, .puzzle-drawer--bottom .puzzle-drawer__resize-bar-inner {
+  background-color: var(--puzzle-color-border-strong, #00000080);
+  width: 100%;
+  height: 4px;
+  min-height: 4px;
+}
+
+.puzzle-drawer--left .puzzle-drawer__resize-bar, .puzzle-drawer--right .puzzle-drawer__resize-bar {
+  cursor: col-resize;
+  height: 100%;
+  padding: 0;
+}
+
+.puzzle-drawer--left .puzzle-drawer__resize-bar {
+  border-right: 2px solid var(--puzzle-color-border-strong, #00000080);
+}
+
+.puzzle-drawer--right .puzzle-drawer__resize-bar {
+  border-left: 2px solid var(--puzzle-color-border-strong, #00000080);
+}
+
+.puzzle-drawer--left .puzzle-drawer__resize-bar-inner, .puzzle-drawer--right .puzzle-drawer__resize-bar-inner {
+  width: 4px;
+  min-width: 4px;
+  height: 100%;
+}
+
+.puzzle-drawer--left {
+  max-width: calc(100% - 2.5rem);
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+
+.puzzle-drawer--right {
+  max-width: calc(100% - 2.5rem);
+  height: 100%;
+  top: 0;
+  right: 0;
+}
+
+.puzzle-drawer--top {
+  width: 100%;
+  max-height: calc(100% - 2.5rem);
+  top: 0;
+  left: 0;
+}
+
+.puzzle-drawer--bottom {
+  width: 100%;
+  max-height: calc(100% - 2.5rem);
+  bottom: 0;
+  left: 0;
+}
+
+.puzzle-drawer__content-wrapper {
+  flex: auto;
+  overflow: hidden;
+}
+
+.puzzle-drawer__content {
+  flex: auto;
+  max-height: 100%;
+  overflow-y: auto;
+}
+
+.puzzle-drawer--top .puzzle-drawer__content-wrapper {
+  padding: var(--puzzle-space-4, 1.5rem) var(--puzzle-space-2, .75rem) 0;
+}
+
+.puzzle-drawer--top .puzzle-drawer__content {
+  padding: 0 var(--puzzle-space-2, .75rem);
+}
+
+.puzzle-drawer--bottom .puzzle-drawer__content-wrapper {
+  padding: 0 var(--puzzle-space-2, .75rem) var(--puzzle-space-4, 1.5rem);
+}
+
+.puzzle-drawer--bottom .puzzle-drawer__content {
+  padding: 0 var(--puzzle-space-2, .75rem);
+}
+
+.puzzle-drawer--left .puzzle-drawer__content-wrapper {
+  padding: var(--puzzle-space-4, 1.5rem) var(--puzzle-space-2, .75rem) var(--puzzle-space-4, 1.5rem)
+        var(--puzzle-space-4, 1.5rem);
+  overflow-x: hidden;
+}
+
+.puzzle-drawer--left .puzzle-drawer__content {
+  padding: 0 var(--puzzle-space-2, .75rem);
+  min-width: 96px;
+}
+
+.puzzle-drawer--right .puzzle-drawer__content-wrapper {
+  padding: var(--puzzle-space-4, 1.5rem) var(--puzzle-space-2, .75rem) var(--puzzle-space-4, 1.5rem)
+        var(--puzzle-space-2, .75rem);
+}
+
+.puzzle-drawer--right .puzzle-drawer__content {
+  padding: 0 var(--puzzle-space-2, .75rem);
+}

package/dist/components/overlays/drawer/index.cjs

@@ -0,0 +1,90 @@
+"use client";
+const require_index = require("../../utilities/transition/index.cjs");
+const require_index$1 = require("../backdrop/index.cjs");
+const require_index$2 = require("../../layout/stack/index.cjs");
+;/* empty css             */
+const require_use_resize_bar = require("./use-resize-bar.cjs");
+let _puzzle_ui_core = require("@puzzle-ui/core");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+// src/components/overlays/drawer/index.tsx
+const TRANSITION_MAP = {
+	left: "slide-in-right",
+	right: "slide-in-left",
+	top: "slide-in-down",
+	bottom: "slide-in-up"
+};
+const Drawer = ({ position = "left", open, onOpenChange, closeOnEscape = true, className, children, ...props }) => {
+	const handleClose = (0, react.useCallback)(() => {
+		onOpenChange(false);
+	}, [onOpenChange]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$1.Backdrop, {
+		open,
+		modal: true,
+		closeOnEscape,
+		onClose: handleClose,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.Transition, {
+			visible: open,
+			template: TRANSITION_MAP[position],
+			forceMount: true,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DrawerContent, {
+				position,
+				open,
+				onOpenChange,
+				className,
+				...props,
+				children
+			})
+		})
+	});
+};
+const DrawerContent = ({ children, className, position = "left", open, onOpenChange, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }) => {
+	const classes = (0, _puzzle_ui_core.cn)("puzzle-drawer", `puzzle-drawer--${position}`, className);
+	const horizontal = position === "left" || position === "right";
+	const { size, value, min, max, resizeRef, handleKeyDown } = require_use_resize_bar.useResizeBar(position, open);
+	(0, react.useEffect)(() => {
+		if (size !== null && size < min) onOpenChange(false);
+	}, [
+		size,
+		min,
+		onOpenChange
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_index$2.Stack, {
+		...props,
+		direction: ["left", "right"].includes(position) ? "row" : "col",
+		reverse: ["top", "left"].includes(position),
+		gap: "0",
+		className: classes,
+		"data-overlay-content": "",
+		tabIndex: -1,
+		role: "dialog",
+		"aria-modal": "true",
+		"aria-label": ariaLabelledBy ? void 0 : ariaLabel,
+		"aria-labelledby": ariaLabelledBy,
+		style: size !== null ? { [horizontal ? "width" : "height"]: `${size}px` } : void 0,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			ref: resizeRef,
+			role: "separator",
+			tabIndex: 0,
+			className: "puzzle-drawer__resize-bar",
+			"aria-label": "Resize drawer",
+			"aria-orientation": horizontal ? "vertical" : "horizontal",
+			"aria-valuenow": value ?? void 0,
+			"aria-valuemin": min,
+			"aria-valuemax": max,
+			onKeyDown: handleKeyDown,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "puzzle-drawer__resize-bar-inner" })
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$2.Stack, {
+			direction: "col",
+			className: "puzzle-drawer__content-wrapper",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$2.Stack, {
+				direction: "col",
+				className: "puzzle-drawer__content",
+				children
+			})
+		})]
+	});
+};
+exports.Drawer = Drawer;
+
+//# sourceMappingURL=index.cjs.map

package/dist/components/overlays/drawer/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["useCallback","Backdrop","Transition","cn","useResizeBar","Stack"],"sources":["../../../../src/components/overlays/drawer/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"@puzzle-ui/core\";\n\nimport { useCallback, useEffect, type ComponentPropsWithRef } from \"react\";\n\nimport {\n  Transition,\n  type TransitionTemplate,\n} from \"../../utilities/transition\";\n\nimport { Backdrop } from \"../backdrop\";\nimport { Stack } from \"../../layout/stack\";\n\nimport \"./drawer.css\";\n\nimport { useResizeBar } from \"./use-resize-bar\";\n\nconst TRANSITION_MAP: Record<DrawerPosition, TransitionTemplate> = {\n  left: \"slide-in-right\",\n  right: \"slide-in-left\",\n  top: \"slide-in-down\",\n  bottom: \"slide-in-up\",\n};\n\ntype DrawerPosition = \"left\" | \"right\" | \"top\" | \"bottom\";\n\ntype DrawerOwnProps = {\n  position?: DrawerPosition;\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  closeOnEscape?: boolean;\n};\n\ntype DrawerProps = DrawerOwnProps &\n  Omit<ComponentPropsWithRef<\"div\">, keyof DrawerOwnProps>;\n\nconst Drawer = ({\n  position = \"left\",\n  open,\n  onOpenChange,\n  closeOnEscape = true,\n  className,\n  children,\n  ...props\n}: DrawerProps) => {\n  const handleClose = useCallback(() => {\n    onOpenChange(false);\n  }, [onOpenChange]);\n\n  return (\n    <Backdrop\n      open={open}\n      modal\n      closeOnEscape={closeOnEscape}\n      onClose={handleClose}\n    >\n      <Transition visible={open} template={TRANSITION_MAP[position]} forceMount>\n        <DrawerContent\n          position={position}\n          open={open}\n          onOpenChange={onOpenChange}\n          className={className}\n          {...props}\n        >\n          {children}\n        </DrawerContent>\n      </Transition>\n    </Backdrop>\n  );\n};\n\nconst DrawerContent = ({\n  children,\n  className,\n  position = \"left\",\n  open,\n  onOpenChange,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  ...props\n}: DrawerProps) => {\n  const classes = cn(\"puzzle-drawer\", `puzzle-drawer--${position}`, className);\n\n  const horizontal = position === \"left\" || position === \"right\";\n  const { size, value, min, max, resizeRef, handleKeyDown } = useResizeBar(\n    position,\n    open,\n  );\n\n  // Dragging the bar below the minimum dismisses the drawer.\n  useEffect(() => {\n    if (size !== null && size < min) {\n      onOpenChange(false);\n    }\n  }, [size, min, onOpenChange]);\n\n  return (\n    <Stack\n      {...props}\n      direction={[\"left\", \"right\"].includes(position) ? \"row\" : \"col\"}\n      reverse={[\"top\", \"left\"].includes(position)}\n      gap=\"0\"\n      className={classes}\n      data-overlay-content=\"\"\n      tabIndex={-1}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-label={ariaLabelledBy ? undefined : ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      style={\n        size !== null\n          ? { [horizontal ? \"width\" : \"height\"]: `${size}px` }\n          : undefined\n      }\n    >\n      <div\n        ref={resizeRef}\n        role=\"separator\"\n        tabIndex={0}\n        className=\"puzzle-drawer__resize-bar\"\n        aria-label=\"Resize drawer\"\n        aria-orientation={horizontal ? \"vertical\" : \"horizontal\"}\n        aria-valuenow={value ?? undefined}\n        aria-valuemin={min}\n        aria-valuemax={max}\n        onKeyDown={handleKeyDown}\n      >\n        <span className=\"puzzle-drawer__resize-bar-inner\" />\n      </div>\n\n      <Stack direction=\"col\" className=\"puzzle-drawer__content-wrapper\">\n        <Stack direction=\"col\" className=\"puzzle-drawer__content\">\n          {children}\n        </Stack>\n      </Stack>\n    </Stack>\n  );\n};\n\nexport { Drawer, type DrawerProps };\n"],"mappings":";;;;;;;;;;AAkBA,MAAM,iBAA6D;CACjE,MAAM;CACN,OAAO;CACP,KAAK;CACL,QAAQ;AACV;AAcA,MAAM,UAAU,EACd,WAAW,QACX,MACA,cACA,gBAAgB,MAChB,WACA,UACA,GAAG,YACc;CACjB,MAAM,eAAA,GAAcA,MAAAA,YAAAA,OAAkB;EACpC,aAAa,KAAK;CACpB,GAAG,CAAC,YAAY,CAAC;CAEjB,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,gBAAAA,UAAD;EACQ;EACN,OAAA;EACe;EACf,SAAS;EAET,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,YAAD;GAAY,SAAS;GAAM,UAAU,eAAe;GAAW,YAAA;GAC7D,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,eAAD;IACY;IACJ;IACQ;IACH;IACX,GAAI;IAEH;GACY,CAAA;EACL,CAAA;CACJ,CAAA;AAEd;AAEA,MAAM,iBAAiB,EACrB,UACA,WACA,WAAW,QACX,MACA,cACA,cAAc,WACd,mBAAmB,gBACnB,GAAG,YACc;CACjB,MAAM,WAAA,GAAUC,gBAAAA,GAAAA,CAAG,iBAAiB,kBAAkB,YAAY,SAAS;CAE3E,MAAM,aAAa,aAAa,UAAU,aAAa;CACvD,MAAM,EAAE,MAAM,OAAO,KAAK,KAAK,WAAW,kBAAkBC,uBAAAA,aAC1D,UACA,IACF;CAGA,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,IAAI,SAAS,QAAQ,OAAO,KAC1B,aAAa,KAAK;CAEtB,GAAG;EAAC;EAAM;EAAK;CAAY,CAAC;CAE5B,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,gBAAAA,OAAD;EACE,GAAI;EACJ,WAAW,CAAC,QAAQ,OAAO,CAAC,CAAC,SAAS,QAAQ,IAAI,QAAQ;EAC1D,SAAS,CAAC,OAAO,MAAM,CAAC,CAAC,SAAS,QAAQ;EAC1C,KAAI;EACJ,WAAW;EACX,wBAAqB;EACrB,UAAU;EACV,MAAK;EACL,cAAW;EACX,cAAY,iBAAiB,KAAA,IAAY;EACzC,mBAAiB;EACjB,OACE,SAAS,OACL,GAAG,aAAa,UAAU,WAAW,GAAG,KAAK,IAAI,IACjD,KAAA;EAfR,UAAA,CAkBE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GACE,KAAK;GACL,MAAK;GACL,UAAU;GACV,WAAU;GACV,cAAW;GACX,oBAAkB,aAAa,aAAa;GAC5C,iBAAe,SAAS,KAAA;GACxB,iBAAe;GACf,iBAAe;GACf,WAAW;GAEX,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD,EAAM,WAAU,kCAAmC,CAAA;EAChD,CAAA,GAEL,iBAAA,GAAA,kBAAA,IAAA,CAACA,gBAAAA,OAAD;GAAO,WAAU;GAAM,WAAU;GAC/B,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACA,gBAAAA,OAAD;IAAO,WAAU;IAAM,WAAU;IAC9B;GACI,CAAA;EACF,CAAA,CACF;;AAEX"}

package/dist/components/overlays/drawer/index.d.cts

@@ -0,0 +1,11 @@
+import { ComponentPropsWithRef } from "react";
+type DrawerPosition = "left" | "right" | "top" | "bottom";
+type DrawerOwnProps = {
+  position?: DrawerPosition;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  closeOnEscape?: boolean;
+};
+type DrawerProps = DrawerOwnProps & Omit<ComponentPropsWithRef<"div">, keyof DrawerOwnProps>;
+declare const Drawer: ({ position, open, onOpenChange, closeOnEscape, className, children, ...props }: DrawerProps) => import("react").JSX.Element;
+export { Drawer, type DrawerProps };

package/dist/components/overlays/drawer/index.d.ts

@@ -0,0 +1,11 @@
+import { ComponentPropsWithRef } from "react";
+type DrawerPosition = "left" | "right" | "top" | "bottom";
+type DrawerOwnProps = {
+  position?: DrawerPosition;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  closeOnEscape?: boolean;
+};
+type DrawerProps = DrawerOwnProps & Omit<ComponentPropsWithRef<"div">, keyof DrawerOwnProps>;
+declare const Drawer: ({ position, open, onOpenChange, closeOnEscape, className, children, ...props }: DrawerProps) => import("react").JSX.Element;
+export { Drawer, type DrawerProps };

package/dist/components/overlays/drawer/index.js

@@ -0,0 +1,90 @@
+"use client";
+import { Transition } from "../../utilities/transition/index.js";
+import { Backdrop } from "../backdrop/index.js";
+import { Stack } from "../../layout/stack/index.js";
+import "./drawer.css";
+import { useResizeBar } from "./use-resize-bar.js";
+import { cn } from "@puzzle-ui/core";
+import { useCallback, useEffect } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/overlays/drawer/index.tsx
+const TRANSITION_MAP = {
+	left: "slide-in-right",
+	right: "slide-in-left",
+	top: "slide-in-down",
+	bottom: "slide-in-up"
+};
+const Drawer = ({ position = "left", open, onOpenChange, closeOnEscape = true, className, children, ...props }) => {
+	const handleClose = useCallback(() => {
+		onOpenChange(false);
+	}, [onOpenChange]);
+	return /* @__PURE__ */ jsx(Backdrop, {
+		open,
+		modal: true,
+		closeOnEscape,
+		onClose: handleClose,
+		children: /* @__PURE__ */ jsx(Transition, {
+			visible: open,
+			template: TRANSITION_MAP[position],
+			forceMount: true,
+			children: /* @__PURE__ */ jsx(DrawerContent, {
+				position,
+				open,
+				onOpenChange,
+				className,
+				...props,
+				children
+			})
+		})
+	});
+};
+const DrawerContent = ({ children, className, position = "left", open, onOpenChange, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }) => {
+	const classes = cn("puzzle-drawer", `puzzle-drawer--${position}`, className);
+	const horizontal = position === "left" || position === "right";
+	const { size, value, min, max, resizeRef, handleKeyDown } = useResizeBar(position, open);
+	useEffect(() => {
+		if (size !== null && size < min) onOpenChange(false);
+	}, [
+		size,
+		min,
+		onOpenChange
+	]);
+	return /* @__PURE__ */ jsxs(Stack, {
+		...props,
+		direction: ["left", "right"].includes(position) ? "row" : "col",
+		reverse: ["top", "left"].includes(position),
+		gap: "0",
+		className: classes,
+		"data-overlay-content": "",
+		tabIndex: -1,
+		role: "dialog",
+		"aria-modal": "true",
+		"aria-label": ariaLabelledBy ? void 0 : ariaLabel,
+		"aria-labelledby": ariaLabelledBy,
+		style: size !== null ? { [horizontal ? "width" : "height"]: `${size}px` } : void 0,
+		children: [/* @__PURE__ */ jsx("div", {
+			ref: resizeRef,
+			role: "separator",
+			tabIndex: 0,
+			className: "puzzle-drawer__resize-bar",
+			"aria-label": "Resize drawer",
+			"aria-orientation": horizontal ? "vertical" : "horizontal",
+			"aria-valuenow": value ?? void 0,
+			"aria-valuemin": min,
+			"aria-valuemax": max,
+			onKeyDown: handleKeyDown,
+			children: /* @__PURE__ */ jsx("span", { className: "puzzle-drawer__resize-bar-inner" })
+		}), /* @__PURE__ */ jsx(Stack, {
+			direction: "col",
+			className: "puzzle-drawer__content-wrapper",
+			children: /* @__PURE__ */ jsx(Stack, {
+				direction: "col",
+				className: "puzzle-drawer__content",
+				children
+			})
+		})]
+	});
+};
+export { Drawer };
+
+//# sourceMappingURL=index.js.map

package/dist/components/overlays/drawer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/overlays/drawer/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"@puzzle-ui/core\";\n\nimport { useCallback, useEffect, type ComponentPropsWithRef } from \"react\";\n\nimport {\n  Transition,\n  type TransitionTemplate,\n} from \"../../utilities/transition\";\n\nimport { Backdrop } from \"../backdrop\";\nimport { Stack } from \"../../layout/stack\";\n\nimport \"./drawer.css\";\n\nimport { useResizeBar } from \"./use-resize-bar\";\n\nconst TRANSITION_MAP: Record<DrawerPosition, TransitionTemplate> = {\n  left: \"slide-in-right\",\n  right: \"slide-in-left\",\n  top: \"slide-in-down\",\n  bottom: \"slide-in-up\",\n};\n\ntype DrawerPosition = \"left\" | \"right\" | \"top\" | \"bottom\";\n\ntype DrawerOwnProps = {\n  position?: DrawerPosition;\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  closeOnEscape?: boolean;\n};\n\ntype DrawerProps = DrawerOwnProps &\n  Omit<ComponentPropsWithRef<\"div\">, keyof DrawerOwnProps>;\n\nconst Drawer = ({\n  position = \"left\",\n  open,\n  onOpenChange,\n  closeOnEscape = true,\n  className,\n  children,\n  ...props\n}: DrawerProps) => {\n  const handleClose = useCallback(() => {\n    onOpenChange(false);\n  }, [onOpenChange]);\n\n  return (\n    <Backdrop\n      open={open}\n      modal\n      closeOnEscape={closeOnEscape}\n      onClose={handleClose}\n    >\n      <Transition visible={open} template={TRANSITION_MAP[position]} forceMount>\n        <DrawerContent\n          position={position}\n          open={open}\n          onOpenChange={onOpenChange}\n          className={className}\n          {...props}\n        >\n          {children}\n        </DrawerContent>\n      </Transition>\n    </Backdrop>\n  );\n};\n\nconst DrawerContent = ({\n  children,\n  className,\n  position = \"left\",\n  open,\n  onOpenChange,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  ...props\n}: DrawerProps) => {\n  const classes = cn(\"puzzle-drawer\", `puzzle-drawer--${position}`, className);\n\n  const horizontal = position === \"left\" || position === \"right\";\n  const { size, value, min, max, resizeRef, handleKeyDown } = useResizeBar(\n    position,\n    open,\n  );\n\n  // Dragging the bar below the minimum dismisses the drawer.\n  useEffect(() => {\n    if (size !== null && size < min) {\n      onOpenChange(false);\n    }\n  }, [size, min, onOpenChange]);\n\n  return (\n    <Stack\n      {...props}\n      direction={[\"left\", \"right\"].includes(position) ? \"row\" : \"col\"}\n      reverse={[\"top\", \"left\"].includes(position)}\n      gap=\"0\"\n      className={classes}\n      data-overlay-content=\"\"\n      tabIndex={-1}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-label={ariaLabelledBy ? undefined : ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      style={\n        size !== null\n          ? { [horizontal ? \"width\" : \"height\"]: `${size}px` }\n          : undefined\n      }\n    >\n      <div\n        ref={resizeRef}\n        role=\"separator\"\n        tabIndex={0}\n        className=\"puzzle-drawer__resize-bar\"\n        aria-label=\"Resize drawer\"\n        aria-orientation={horizontal ? \"vertical\" : \"horizontal\"}\n        aria-valuenow={value ?? undefined}\n        aria-valuemin={min}\n        aria-valuemax={max}\n        onKeyDown={handleKeyDown}\n      >\n        <span className=\"puzzle-drawer__resize-bar-inner\" />\n      </div>\n\n      <Stack direction=\"col\" className=\"puzzle-drawer__content-wrapper\">\n        <Stack direction=\"col\" className=\"puzzle-drawer__content\">\n          {children}\n        </Stack>\n      </Stack>\n    </Stack>\n  );\n};\n\nexport { Drawer, type DrawerProps };\n"],"mappings":";;;;;;;;;;AAkBA,MAAM,iBAA6D;CACjE,MAAM;CACN,OAAO;CACP,KAAK;CACL,QAAQ;AACV;AAcA,MAAM,UAAU,EACd,WAAW,QACX,MACA,cACA,gBAAgB,MAChB,WACA,UACA,GAAG,YACc;CACjB,MAAM,cAAc,kBAAkB;EACpC,aAAa,KAAK;CACpB,GAAG,CAAC,YAAY,CAAC;CAEjB,OACE,oBAAC,UAAD;EACQ;EACN,OAAA;EACe;EACf,SAAS;EAET,UAAA,oBAAC,YAAD;GAAY,SAAS;GAAM,UAAU,eAAe;GAAW,YAAA;GAC7D,UAAA,oBAAC,eAAD;IACY;IACJ;IACQ;IACH;IACX,GAAI;IAEH;GACY,CAAA;EACL,CAAA;CACJ,CAAA;AAEd;AAEA,MAAM,iBAAiB,EACrB,UACA,WACA,WAAW,QACX,MACA,cACA,cAAc,WACd,mBAAmB,gBACnB,GAAG,YACc;CACjB,MAAM,UAAU,GAAG,iBAAiB,kBAAkB,YAAY,SAAS;CAE3E,MAAM,aAAa,aAAa,UAAU,aAAa;CACvD,MAAM,EAAE,MAAM,OAAO,KAAK,KAAK,WAAW,kBAAkB,aAC1D,UACA,IACF;CAGA,gBAAgB;EACd,IAAI,SAAS,QAAQ,OAAO,KAC1B,aAAa,KAAK;CAEtB,GAAG;EAAC;EAAM;EAAK;CAAY,CAAC;CAE5B,OACE,qBAAC,OAAD;EACE,GAAI;EACJ,WAAW,CAAC,QAAQ,OAAO,CAAC,CAAC,SAAS,QAAQ,IAAI,QAAQ;EAC1D,SAAS,CAAC,OAAO,MAAM,CAAC,CAAC,SAAS,QAAQ;EAC1C,KAAI;EACJ,WAAW;EACX,wBAAqB;EACrB,UAAU;EACV,MAAK;EACL,cAAW;EACX,cAAY,iBAAiB,KAAA,IAAY;EACzC,mBAAiB;EACjB,OACE,SAAS,OACL,GAAG,aAAa,UAAU,WAAW,GAAG,KAAK,IAAI,IACjD,KAAA;EAfR,UAAA,CAkBE,oBAAC,OAAD;GACE,KAAK;GACL,MAAK;GACL,UAAU;GACV,WAAU;GACV,cAAW;GACX,oBAAkB,aAAa,aAAa;GAC5C,iBAAe,SAAS,KAAA;GACxB,iBAAe;GACf,iBAAe;GACf,WAAW;GAEX,UAAA,oBAAC,QAAD,EAAM,WAAU,kCAAmC,CAAA;EAChD,CAAA,GAEL,oBAAC,OAAD;GAAO,WAAU;GAAM,WAAU;GAC/B,UAAA,oBAAC,OAAD;IAAO,WAAU;IAAM,WAAU;IAC9B;GACI,CAAA;EACF,CAAA,CACF;;AAEX"}

package/dist/components/overlays/drawer/use-resize-bar.cjs

@@ -0,0 +1,152 @@
+let react = require("react");
+// src/components/overlays/drawer/use-resize-bar.ts
+const KEYBOARD_STEP = 16;
+const KEYBOARD_LARGE_STEP = 64;
+const isHorizontal = (position) => position === "left" || position === "right";
+const getDirection = (position) => position === "left" || position === "top" ? 1 : -1;
+const getViewportMax = (position, margin, ownerWindow) => Math.max(margin, (isHorizontal(position) ? ownerWindow.innerWidth : ownerWindow.innerHeight) - margin);
+const useResizeBar = (position, active, { min = 100, margin = 40 } = {}) => {
+	const resizeRef = (0, react.useRef)(null);
+	const [size, setSize] = (0, react.useState)(null);
+	const [measured, setMeasured] = (0, react.useState)(null);
+	const [viewportMax, setViewportMax] = (0, react.useState)(null);
+	const measure = (0, react.useCallback)(() => {
+		const panel = resizeRef.current?.parentElement;
+		if (!panel) return null;
+		const rect = panel.getBoundingClientRect();
+		const value = Math.round(isHorizontal(position) ? rect.width : rect.height);
+		setMeasured(value);
+		return value;
+	}, [position]);
+	(0, react.useEffect)(() => {
+		if (active) setSize(null);
+	}, [active, position]);
+	(0, react.useLayoutEffect)(() => {
+		if (active) measure();
+	}, [
+		active,
+		size,
+		position,
+		measure
+	]);
+	(0, react.useLayoutEffect)(() => {
+		const ownerWindow = resizeRef.current?.ownerDocument.defaultView;
+		if (!active || !ownerWindow) return;
+		const update = () => setViewportMax(getViewportMax(position, margin, ownerWindow));
+		update();
+		ownerWindow.addEventListener("resize", update);
+		return () => ownerWindow.removeEventListener("resize", update);
+	}, [
+		active,
+		position,
+		margin
+	]);
+	(0, react.useEffect)(() => {
+		if (!active) return;
+		const element = resizeRef.current;
+		const ownerDocument = element?.ownerDocument;
+		const ownerWindow = ownerDocument?.defaultView;
+		if (!element || !ownerDocument || !ownerWindow) return;
+		const body = ownerDocument.body;
+		let activePointerId = null;
+		let startPointer = 0;
+		let startSize = 0;
+		let previousUserSelect = "";
+		let previousTouchAction = "";
+		const endDrag = (event) => {
+			if (activePointerId === null) return;
+			if (event && element.hasPointerCapture?.(event.pointerId)) element.releasePointerCapture(event.pointerId);
+			activePointerId = null;
+			body.style.userSelect = previousUserSelect;
+			body.style.touchAction = previousTouchAction;
+		};
+		const getPointer = (event) => isHorizontal(position) ? event.clientX : event.clientY;
+		const handlePointerDown = (event) => {
+			if (event.button !== 0 && event.pointerType === "mouse") return;
+			event.stopPropagation();
+			const panel = element.parentElement;
+			if (!panel) return;
+			const rect = panel.getBoundingClientRect();
+			activePointerId = event.pointerId;
+			startPointer = getPointer(event);
+			startSize = isHorizontal(position) ? rect.width : rect.height;
+			previousUserSelect = body.style.userSelect;
+			previousTouchAction = body.style.touchAction;
+			body.style.userSelect = "none";
+			body.style.touchAction = "none";
+			element.setPointerCapture?.(event.pointerId);
+		};
+		const handlePointerMove = (event) => {
+			if (event.pointerId !== activePointerId) return;
+			event.stopPropagation();
+			const delta = (getPointer(event) - startPointer) * getDirection(position);
+			setSize(Math.min(Math.max(0, Math.round(startSize + delta)), getViewportMax(position, margin, ownerWindow)));
+		};
+		const handlePointerEnd = (event) => {
+			if (event.pointerId !== activePointerId) return;
+			endDrag(event);
+		};
+		element.addEventListener("pointerdown", handlePointerDown);
+		element.addEventListener("pointermove", handlePointerMove);
+		element.addEventListener("pointerup", handlePointerEnd);
+		element.addEventListener("pointercancel", handlePointerEnd);
+		return () => {
+			element.removeEventListener("pointerdown", handlePointerDown);
+			element.removeEventListener("pointermove", handlePointerMove);
+			element.removeEventListener("pointerup", handlePointerEnd);
+			element.removeEventListener("pointercancel", handlePointerEnd);
+			endDrag();
+		};
+	}, [
+		position,
+		active,
+		margin
+	]);
+	const max = Math.max(min, viewportMax ?? min);
+	const handleKeyDown = (event) => {
+		const current = size ?? measured ?? measure();
+		if (current === null) return;
+		const step = event.shiftKey ? KEYBOARD_LARGE_STEP : KEYBOARD_STEP;
+		const direction = getDirection(position);
+		const horizontal = isHorizontal(position);
+		let next = null;
+		switch (event.key) {
+			case "ArrowRight":
+				next = horizontal ? current + step * direction : null;
+				break;
+			case "ArrowLeft":
+				next = horizontal ? current - step * direction : null;
+				break;
+			case "ArrowDown":
+				next = horizontal ? null : current + step * direction;
+				break;
+			case "ArrowUp":
+				next = horizontal ? null : current - step * direction;
+				break;
+			case "PageUp":
+				next = current + KEYBOARD_LARGE_STEP;
+				break;
+			case "PageDown":
+				next = current - KEYBOARD_LARGE_STEP;
+				break;
+			case "Home":
+				next = min;
+				break;
+			case "End": next = max;
+		}
+		if (next === null) return;
+		event.preventDefault();
+		setSize(Math.min(Math.max(next, min), max));
+	};
+	return {
+		size,
+		value: size ?? measured,
+		min,
+		max,
+		resizeRef,
+		handleKeyDown
+	};
+};
+exports.useResizeBar = useResizeBar;
+
+//# sourceMappingURL=use-resize-bar.cjs.map

package/dist/components/overlays/drawer/use-resize-bar.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-resize-bar.cjs","names":["useRef","useState","useCallback"],"sources":["../../../../src/components/overlays/drawer/use-resize-bar.ts"],"sourcesContent":["import {\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type KeyboardEvent,\n} from \"react\";\n\ntype ResizePosition = \"left\" | \"right\" | \"top\" | \"bottom\";\n\nconst KEYBOARD_STEP = 16;\nconst KEYBOARD_LARGE_STEP = 64;\n\nconst isHorizontal = (position: ResizePosition) =>\n  position === \"left\" || position === \"right\";\n\n// Left and top drawers grow when their bar moves away from the origin edge.\nconst getDirection = (position: ResizePosition) =>\n  position === \"left\" || position === \"top\" ? 1 : -1;\n\n// Uses the window that owns the element, which may belong to another document.\nconst getViewportMax = (\n  position: ResizePosition,\n  margin: number,\n  ownerWindow: Window,\n) =>\n  Math.max(\n    margin,\n    (isHorizontal(position)\n      ? ownerWindow.innerWidth\n      : ownerWindow.innerHeight) - margin,\n  );\n\ntype UseResizeBarOptions = {\n  /** Smallest size reachable with the keyboard, in px. */\n  min?: number;\n  /** Space kept free next to the drawer, in px. */\n  margin?: number;\n};\n\nconst useResizeBar = (\n  position: ResizePosition,\n  active: boolean,\n  { min = 100, margin = 40 }: UseResizeBarOptions = {},\n) => {\n  const resizeRef = useRef<HTMLDivElement | null>(null);\n  const [size, setSize] = useState<number | null>(null);\n  const [measured, setMeasured] = useState<number | null>(null);\n  const [viewportMax, setViewportMax] = useState<number | null>(null);\n\n  const measure = useCallback(() => {\n    const panel = resizeRef.current?.parentElement;\n\n    if (!panel) {\n      return null;\n    }\n\n    const rect = panel.getBoundingClientRect();\n    const value = Math.round(isHorizontal(position) ? rect.width : rect.height);\n\n    setMeasured(value);\n\n    return value;\n  }, [position]);\n\n  useEffect(() => {\n    if (active) {\n      setSize(null);\n    }\n  }, [active, position]);\n\n  useLayoutEffect(() => {\n    if (active) {\n      measure();\n    }\n  }, [active, size, position, measure]);\n\n  useLayoutEffect(() => {\n    const ownerWindow = resizeRef.current?.ownerDocument.defaultView;\n\n    if (!active || !ownerWindow) return;\n\n    const update = () =>\n      setViewportMax(getViewportMax(position, margin, ownerWindow));\n\n    update();\n    ownerWindow.addEventListener(\"resize\", update);\n\n    return () => ownerWindow.removeEventListener(\"resize\", update);\n  }, [active, position, margin]);\n\n  useEffect(() => {\n    if (!active) return;\n\n    const element = resizeRef.current;\n    const ownerDocument = element?.ownerDocument;\n    const ownerWindow = ownerDocument?.defaultView;\n\n    if (!element || !ownerDocument || !ownerWindow) return;\n\n    const body = ownerDocument.body;\n    let activePointerId: number | null = null;\n    let startPointer = 0;\n    let startSize = 0;\n    let previousUserSelect = \"\";\n    let previousTouchAction = \"\";\n\n    const endDrag = (event?: PointerEvent) => {\n      if (activePointerId === null) return;\n\n      if (event && element.hasPointerCapture?.(event.pointerId)) {\n        element.releasePointerCapture(event.pointerId);\n      }\n\n      activePointerId = null;\n      body.style.userSelect = previousUserSelect;\n      body.style.touchAction = previousTouchAction;\n    };\n\n    const getPointer = (event: PointerEvent) =>\n      isHorizontal(position) ? event.clientX : event.clientY;\n\n    const handlePointerDown = (event: PointerEvent) => {\n      if (event.button !== 0 && event.pointerType === \"mouse\") return;\n\n      event.stopPropagation();\n\n      const panel = element.parentElement;\n\n      if (!panel) return;\n\n      const rect = panel.getBoundingClientRect();\n\n      activePointerId = event.pointerId;\n      startPointer = getPointer(event);\n      startSize = isHorizontal(position) ? rect.width : rect.height;\n\n      previousUserSelect = body.style.userSelect;\n      previousTouchAction = body.style.touchAction;\n      body.style.userSelect = \"none\";\n      body.style.touchAction = \"none\";\n\n      element.setPointerCapture?.(event.pointerId);\n    };\n\n    const handlePointerMove = (event: PointerEvent) => {\n      if (event.pointerId !== activePointerId) return;\n\n      event.stopPropagation();\n\n      const delta = (getPointer(event) - startPointer) * getDirection(position);\n\n      setSize(\n        Math.min(\n          Math.max(0, Math.round(startSize + delta)),\n          getViewportMax(position, margin, ownerWindow),\n        ),\n      );\n    };\n\n    const handlePointerEnd = (event: PointerEvent) => {\n      if (event.pointerId !== activePointerId) return;\n\n      endDrag(event);\n    };\n\n    element.addEventListener(\"pointerdown\", handlePointerDown);\n    element.addEventListener(\"pointermove\", handlePointerMove);\n    element.addEventListener(\"pointerup\", handlePointerEnd);\n    element.addEventListener(\"pointercancel\", handlePointerEnd);\n\n    return () => {\n      element.removeEventListener(\"pointerdown\", handlePointerDown);\n      element.removeEventListener(\"pointermove\", handlePointerMove);\n      element.removeEventListener(\"pointerup\", handlePointerEnd);\n      element.removeEventListener(\"pointercancel\", handlePointerEnd);\n\n      endDrag();\n    };\n  }, [position, active, margin]);\n\n  const max = Math.max(min, viewportMax ?? min);\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLElement>) => {\n    const current = size ?? measured ?? measure();\n\n    if (current === null) return;\n\n    const step = event.shiftKey ? KEYBOARD_LARGE_STEP : KEYBOARD_STEP;\n    const direction = getDirection(position);\n    const horizontal = isHorizontal(position);\n    let next: number | null = null;\n\n    switch (event.key) {\n      case \"ArrowRight\":\n        next = horizontal ? current + step * direction : null;\n        break;\n      case \"ArrowLeft\":\n        next = horizontal ? current - step * direction : null;\n        break;\n      case \"ArrowDown\":\n        next = horizontal ? null : current + step * direction;\n        break;\n      case \"ArrowUp\":\n        next = horizontal ? null : current - step * direction;\n        break;\n      case \"PageUp\":\n        next = current + KEYBOARD_LARGE_STEP;\n        break;\n      case \"PageDown\":\n        next = current - KEYBOARD_LARGE_STEP;\n        break;\n      case \"Home\":\n        next = min;\n        break;\n      case \"End\":\n        next = max;\n        break;\n    }\n\n    if (next === null) return;\n\n    event.preventDefault();\n    setSize(Math.min(Math.max(next, min), max));\n  };\n\n  return {\n    size,\n    value: size ?? measured,\n    min,\n    max,\n    resizeRef,\n    handleKeyDown,\n  };\n};\n\nexport { useResizeBar };\n"],"mappings":"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"}