@puzzle-ui/ui 0.1.0 → 0.3.0

package/README.md

@@ -1,5 +1,79 @@
 # @puzzle-ui/ui
 
+Composable React UI components for Puzzle: actions, forms, data display,
+layout, navigation, overlays, typography, and utilities.
+
+> Puzzle is under active development and is not ready for production use.
+> APIs, styling, accessibility coverage, and framework compatibility may
+> change. Use it for experimentation and evaluation.
+
+## Installation
+
+Install the UI library and its theme provider:
+
+```sh
+npm install @puzzle-ui/ui @puzzle-ui/theme
+# or
+bun add @puzzle-ui/ui @puzzle-ui/theme
+# or
+pnpm add @puzzle-ui/ui @puzzle-ui/theme
+# or
+yarn add @puzzle-ui/ui @puzzle-ui/theme
+```
+
+Requires React and React DOM 19 (`^19.0.0`) and a bundler that supports CSS
+imports, such as Vite. Consumers do not need Bun.
+
+## Usage
+
+```tsx
+import { Theme } from "@puzzle-ui/theme";
+import { Button } from "@puzzle-ui/ui";
+
+export const App = () => (
+  <Theme>
+    <main>
+      <h1>Hello, Puzzle</h1>
+      <Button onClick={() => window.alert("Hello!")}>
+        Get started
+      </Button>
+    </main>
+  </Theme>
+);
+```
+
+`Theme` supplies the design tokens and global defaults. Component CSS is
+imported automatically; no separate Puzzle stylesheet or Tailwind setup is
+required. Customize colors, fonts, spacing, and other tokens through
+[`@puzzle-ui/theme`](../theme/README.md).
+
+## Components and imports
+
+Use named imports from `@puzzle-ui/ui`. Components include buttons, cards,
+inputs, dialogs, tabs, navigation, layout primitives, and typography.
+Internal component paths are not exported package entry points.
+
+Browse the repository's
+[component documentation](../../apps/site/content/docs/components/ui) for
+examples, props, and accessibility guidance. Interactive components need a
+client boundary in React Server Component applications.
+
+The package ships ESM and CommonJS builds with matching TypeScript
+declarations. Its CSS requires a CSS-aware bundler rather than bare Node.js.
+Test your chosen components in your framework; compatibility is still being
+evaluated.
+
+## Development
+
+From an installed repository checkout:
+
+```sh
+npm run build --workspace=@puzzle-ui/ui
+```
+
+`prepack` rebuilds the package before packing or publishing. See the root
+[publishing guide](../../README.md#publishing-packages).
+
 ## Tests
 
 Three layers, selected by file name and run by Vitest projects (see `vitest.config.ts`):
@@ -15,3 +89,10 @@ Three layers, selected by file name and run by Vitest projects (see `vitest.conf
 - **Browser**: behavior that needs real layout, computed styles, focus or pointer input.
 
 `bun run vitest` runs unit and component; `bun run test:all` runs everything. The first browser run needs `bunx playwright install chromium`.
+
+Run these test commands from this package directory in a repository
+checkout, after installing workspace dependencies.
+
+## License
+
+MIT. See [LICENSE](../../LICENSE); the published license is at `dist/LICENSE`.

package/dist/components/layout/resizable-panels/index.cjs

@@ -0,0 +1,226 @@
+"use client";
+const require_resizable_panels_utils = require("./resizable-panels.utils.cjs");
+;/* empty css                       */
+let _puzzle_ui_core = require("@puzzle-ui/core");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+// src/components/layout/resizable-panels/index.tsx
+const isResizablePanelElement = (child) => (0, react.isValidElement)(child) && child.type === ResizablePanel;
+const isResizableHandleElement = (child) => (0, react.isValidElement)(child) && child.type === ResizableHandle;
+const parsePixels = (value) => Number.parseFloat(value ?? "") || 0;
+const getAvailableSize = (group, orientation) => {
+	const computedStyle = group.ownerDocument.defaultView?.getComputedStyle(group);
+	const isHorizontal = orientation === "horizontal";
+	const totalSize = isHorizontal ? group.clientWidth : group.clientHeight;
+	const paddingSize = computedStyle ? isHorizontal ? parsePixels(computedStyle.paddingLeft) + parsePixels(computedStyle.paddingRight) : parsePixels(computedStyle.paddingTop) + parsePixels(computedStyle.paddingBottom) : 0;
+	const handleSize = Array.from(group.children).reduce((total, child) => {
+		const element = child;
+		if (!element.hasAttribute("data-puzzle-resizable-handle")) return total;
+		const rect = element.getBoundingClientRect();
+		return total + (isHorizontal ? rect.width : rect.height);
+	}, 0);
+	return Math.max(0, totalSize - paddingSize - handleSize);
+};
+const getResizeDirection = (element, orientation) => {
+	if (orientation !== "horizontal") return 1;
+	return element.ownerDocument.defaultView?.getComputedStyle(element).direction === "rtl" ? -1 : 1;
+};
+const getPointerCoordinate = (event, orientation) => orientation === "horizontal" ? event.clientX : event.clientY;
+const ResizablePanel = ({ id, minSize = 0, maxSize = 100, panelIndex = 0, panelSize = 1, panelId, className, style, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	...props,
+	id: panelId ?? id,
+	className: (0, _puzzle_ui_core.cn)("puzzle-resizable-panels__panel", className),
+	style: {
+		...style,
+		flex: `${panelSize} 1 0%`
+	},
+	"data-panel-index": panelIndex,
+	"data-panel-size": panelSize,
+	"data-panel-min-size": minSize,
+	"data-panel-max-size": maxSize
+});
+const ResizableHandle = ({ withGrip = false, disabled = false, handleIndex = -1, orientation = "horizontal", value, minValue, maxValue, panelIds, inheritedDisabled = false, onResizeStart, onResizeMove, onResizeEnd, onResizeKeyDown, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onLostPointerCapture, onKeyDown, className, children, tabIndex, "aria-label": ariaLabel, ...props }) => {
+	const isDisabled = disabled || inheritedDisabled;
+	const handlePointerDown = (event) => {
+		onPointerDown?.(event);
+		if (!event.defaultPrevented && !isDisabled) onResizeStart?.(event, handleIndex);
+	};
+	const handlePointerMove = (event) => {
+		onPointerMove?.(event);
+		if (!event.defaultPrevented && !isDisabled) onResizeMove?.(event, handleIndex);
+	};
+	const handlePointerUp = (event) => {
+		onResizeEnd?.(event, handleIndex);
+		onPointerUp?.(event);
+	};
+	const handlePointerCancel = (event) => {
+		onResizeEnd?.(event, handleIndex);
+		onPointerCancel?.(event);
+	};
+	const handleLostPointerCapture = (event) => {
+		onResizeEnd?.(event, handleIndex);
+		onLostPointerCapture?.(event);
+	};
+	const handleKeyDown = (event) => {
+		onKeyDown?.(event);
+		if (!event.defaultPrevented && !isDisabled) onResizeKeyDown?.(event, handleIndex);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...props,
+		className: (0, _puzzle_ui_core.cn)("puzzle-resizable-panels__handle", className),
+		role: "separator",
+		tabIndex: isDisabled ? -1 : tabIndex ?? 0,
+		"aria-label": ariaLabel ?? "Resize panels",
+		"aria-orientation": orientation === "horizontal" ? "vertical" : "horizontal",
+		"aria-controls": panelIds?.join(" "),
+		"aria-valuenow": value,
+		"aria-valuemin": minValue,
+		"aria-valuemax": maxValue,
+		"aria-valuetext": value === void 0 ? void 0 : `${Math.round(value * 100) / 100}%`,
+		"aria-disabled": isDisabled || void 0,
+		"data-puzzle-resizable-handle": "",
+		"data-orientation": orientation,
+		"data-disabled": isDisabled ? "true" : void 0,
+		onPointerDown: handlePointerDown,
+		onPointerMove: handlePointerMove,
+		onPointerUp: handlePointerUp,
+		onPointerCancel: handlePointerCancel,
+		onLostPointerCapture: handleLostPointerCapture,
+		onKeyDown: handleKeyDown,
+		children: withGrip ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "puzzle-resizable-panels__handle-grip",
+			"aria-hidden": "true"
+		}) : children
+	});
+};
+const ResizablePanelsRoot = ({ children, orientation = "horizontal", sizes, defaultSizes, onSizesChange, disabled = false, keyboardStep = 1, id, role, className, style, ref: forwardedRef, ...rootProps }) => {
+	const generatedId = (0, react.useId)();
+	const groupId = id ?? `puzzle-resizable-panels-${generatedId}`;
+	if (!Number.isFinite(keyboardStep) || keyboardStep <= 0) throw new RangeError("keyboardStep must be a positive finite number.");
+	const childrenArray = react.Children.toArray(children);
+	if (!(childrenArray.length >= 3 && childrenArray.length % 2 === 1 && childrenArray.every((child, index) => index % 2 === 0 ? isResizablePanelElement(child) : isResizableHandleElement(child)))) throw new Error("ResizablePanels requires alternating Panel and Handle children, starting and ending with a Panel. At least two panels are required.");
+	const panelElements = childrenArray.filter(isResizablePanelElement);
+	const panelCount = panelElements.length;
+	const panelConstraints = panelElements.map((panel) => ({
+		minSize: panel.props.minSize,
+		maxSize: panel.props.maxSize
+	}));
+	const panelIds = panelElements.map((panel, index) => panel.props.id ?? `${groupId}-panel-${index}`);
+	if (new Set(panelIds).size !== panelIds.length) throw new Error("ResizablePanels requires unique panel IDs.");
+	const [uncontrolledSizes, setUncontrolledSizes] = (0, react.useState)(() => require_resizable_panels_utils.normalizePanelSizes(sizes === void 0 ? defaultSizes : void 0, panelConstraints));
+	const layoutInput = sizes ?? (uncontrolledSizes.length === panelCount ? uncontrolledSizes : void 0);
+	const currentSizes = require_resizable_panels_utils.normalizePanelSizes(layoutInput, panelConstraints);
+	const [isResizing, setIsResizing] = (0, react.useState)(false);
+	const groupRef = (0, react.useRef)(null);
+	const pointerDragRef = (0, react.useRef)(null);
+	const updateSizes = (nextSizes) => {
+		const normalized = require_resizable_panels_utils.normalizePanelSizes(nextSizes, panelConstraints);
+		if (!normalized.some((size, index) => Math.abs(size - currentSizes[index]) > 1e-6)) return;
+		if (sizes === void 0) setUncontrolledSizes(normalized);
+		onSizesChange?.(normalized);
+	};
+	const handlePointerDown = (event, handleIndex) => {
+		const group = groupRef.current;
+		if (!group || disabled) return;
+		if (event.button !== 0 && event.pointerType !== "touch" && event.pointerType !== "pen") return;
+		const availableSize = getAvailableSize(group, orientation);
+		if (availableSize <= 0) return;
+		pointerDragRef.current = {
+			handleIndex,
+			pointerId: event.pointerId,
+			startCoordinate: getPointerCoordinate(event, orientation),
+			availableSize,
+			direction: getResizeDirection(group, orientation),
+			sizes: [...currentSizes]
+		};
+		try {
+			event.currentTarget.setPointerCapture(event.pointerId);
+		} catch {}
+		event.preventDefault();
+		setIsResizing(true);
+	};
+	const handlePointerMove = (event, handleIndex) => {
+		const drag = pointerDragRef.current;
+		if (!drag || drag.pointerId !== event.pointerId || drag.handleIndex !== handleIndex) return;
+		const delta = (getPointerCoordinate(event, orientation) - drag.startCoordinate) / drag.availableSize * 100 * drag.direction;
+		const nextSizes = require_resizable_panels_utils.resizePanelPair(drag.sizes, panelConstraints, handleIndex, delta);
+		event.preventDefault();
+		updateSizes(nextSizes);
+	};
+	const handlePointerEnd = (event, handleIndex) => {
+		const drag = pointerDragRef.current;
+		if (!drag || drag.pointerId !== event.pointerId || drag.handleIndex !== handleIndex) return;
+		pointerDragRef.current = null;
+		setIsResizing(false);
+	};
+	const handleKeyDown = (event, handleIndex) => {
+		if (disabled) return;
+		const currentSize = currentSizes[handleIndex];
+		const bounds = require_resizable_panels_utils.getPanelPairBounds(currentSizes, panelConstraints, handleIndex);
+		const group = groupRef.current;
+		const direction = group ? getResizeDirection(group, orientation) : 1;
+		const step = keyboardStep * (event.shiftKey ? 10 : 1);
+		let nextSize;
+		if (event.key === "Home") nextSize = bounds.minSize;
+		else if (event.key === "End") nextSize = bounds.maxSize;
+		else if (orientation === "horizontal") {
+			if (event.key === "ArrowRight") nextSize = currentSize + step * direction;
+			else if (event.key === "ArrowLeft") nextSize = currentSize - step * direction;
+		} else if (event.key === "ArrowDown") nextSize = currentSize + step;
+		else if (event.key === "ArrowUp") nextSize = currentSize - step;
+		if (nextSize === void 0) return;
+		event.preventDefault();
+		updateSizes(require_resizable_panels_utils.resizePanelPair(currentSizes, panelConstraints, handleIndex, nextSize - currentSize));
+	};
+	let panelIndex = 0;
+	const enhancedChildren = childrenArray.map((child) => {
+		if (isResizablePanelElement(child)) {
+			const index = panelIndex++;
+			return (0, react.cloneElement)(child, {
+				panelIndex: index,
+				panelSize: currentSizes[index],
+				panelId: panelIds[index]
+			});
+		}
+		const handleIndex = panelIndex - 1;
+		const bounds = require_resizable_panels_utils.getPanelPairBounds(currentSizes, panelConstraints, handleIndex);
+		return (0, react.cloneElement)(child, {
+			handleIndex,
+			orientation,
+			value: currentSizes[handleIndex],
+			minValue: bounds.minSize,
+			maxValue: bounds.maxSize,
+			panelIds: [panelIds[handleIndex], panelIds[handleIndex + 1]],
+			inheritedDisabled: disabled,
+			onResizeStart: handlePointerDown,
+			onResizeMove: handlePointerMove,
+			onResizeEnd: handlePointerEnd,
+			onResizeKeyDown: handleKeyDown
+		});
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...rootProps,
+		ref: (node) => {
+			groupRef.current = node;
+			if (typeof forwardedRef === "function") forwardedRef(node);
+			else if (forwardedRef) forwardedRef.current = node;
+		},
+		id: groupId,
+		role: role ?? "group",
+		className: (0, _puzzle_ui_core.cn)("puzzle-resizable-panels", className),
+		style,
+		"data-orientation": orientation,
+		"data-disabled": disabled ? "true" : void 0,
+		"data-resizing": isResizing ? "true" : void 0,
+		children: enhancedChildren
+	});
+};
+const ResizablePanels = Object.assign(ResizablePanelsRoot, {
+	Panel: ResizablePanel,
+	Handle: ResizableHandle
+});
+exports.ResizableHandle = ResizableHandle;
+exports.ResizablePanel = ResizablePanel;
+exports.ResizablePanels = ResizablePanels;
+
+//# sourceMappingURL=index.cjs.map

package/dist/components/layout/resizable-panels/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["isValidElement","cn","useId","Children","useState","normalizePanelSizes","useRef","resizePanelPair","getPanelPairBounds","cloneElement"],"sources":["../../../../src/components/layout/resizable-panels/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"@puzzle-ui/core\";\n\nimport {\n  Children,\n  cloneElement,\n  isValidElement,\n  useId,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type PointerEvent as ReactPointerEvent,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\n\nimport {\n  getPanelPairBounds,\n  normalizePanelSizes,\n  resizePanelPair,\n  type PanelSizeConstraint,\n} from \"./resizable-panels.utils\";\n\nimport \"./resizable-panels.css\";\n\ntype ResizablePanelsOrientation = \"horizontal\" | \"vertical\";\n\ntype ResizablePanelsProps = Omit<ComponentPropsWithRef<\"div\">, \"children\"> & {\n  /** Layout direction. Defaults to horizontal. */\n  orientation?: ResizablePanelsOrientation;\n\n  /** Controlled panel sizes, expressed as percentages. */\n  sizes?: readonly number[];\n\n  /** Initial panel sizes for uncontrolled usage. */\n  defaultSizes?: readonly number[];\n\n  /** Called whenever the panel layout changes. */\n  onSizesChange?: (sizes: number[]) => void;\n\n  /** Disables all resizing interactions. */\n  disabled?: boolean;\n\n  /** Percentage change per keyboard interaction. Defaults to 1. */\n  keyboardStep?: number;\n\n  /** Panels and handles that make up the group. */\n  children: ReactNode;\n};\n\ntype ResizablePanelProps = ComponentPropsWithRef<\"div\"> & {\n  /** Minimum panel size in percentages. Defaults to 0. */\n  minSize?: number;\n\n  /** Maximum panel size in percentages. Defaults to 100. */\n  maxSize?: number;\n};\n\ntype ResizableHandleProps = ComponentPropsWithRef<\"div\"> & {\n  /** Renders a visible grip inside the resize handle. */\n  withGrip?: boolean;\n\n  /** Disables resizing through this handle. */\n  disabled?: boolean;\n};\n\ntype ResizePointerHandler = (\n  event: ReactPointerEvent<HTMLDivElement>,\n  handleIndex: number,\n) => void;\n\ntype ResizeKeyboardHandler = (\n  event: ReactKeyboardEvent<HTMLDivElement>,\n  handleIndex: number,\n) => void;\n\ntype InternalResizablePanelProps = {\n  panelIndex?: number;\n  panelSize?: number;\n  panelId?: string;\n};\n\ntype InternalResizableHandleProps = {\n  handleIndex?: number;\n  orientation?: ResizablePanelsOrientation;\n  value?: number;\n  minValue?: number;\n  maxValue?: number;\n  panelIds?: [string, string];\n  inheritedDisabled?: boolean;\n\n  onResizeStart?: ResizePointerHandler;\n  onResizeMove?: ResizePointerHandler;\n  onResizeEnd?: ResizePointerHandler;\n  onResizeKeyDown?: ResizeKeyboardHandler;\n};\n\ntype PointerDragState = {\n  handleIndex: number;\n  pointerId: number;\n  startCoordinate: number;\n  availableSize: number;\n  direction: number;\n  sizes: number[];\n};\n\nconst isResizablePanelElement = (\n  child: ReactNode,\n): child is ReactElement<ResizablePanelProps> =>\n  isValidElement(child) && child.type === ResizablePanel;\n\nconst isResizableHandleElement = (\n  child: ReactNode,\n): child is ReactElement<ResizableHandleProps> =>\n  isValidElement(child) && child.type === ResizableHandle;\n\nconst parsePixels = (value: string | undefined) =>\n  Number.parseFloat(value ?? \"\") || 0;\n\nconst getAvailableSize = (\n  group: HTMLDivElement,\n  orientation: ResizablePanelsOrientation,\n) => {\n  const computedStyle =\n    group.ownerDocument.defaultView?.getComputedStyle(group);\n\n  const isHorizontal = orientation === \"horizontal\";\n\n  const totalSize = isHorizontal ? group.clientWidth : group.clientHeight;\n\n  const paddingSize = computedStyle\n    ? isHorizontal\n      ? parsePixels(computedStyle.paddingLeft) +\n        parsePixels(computedStyle.paddingRight)\n      : parsePixels(computedStyle.paddingTop) +\n        parsePixels(computedStyle.paddingBottom)\n    : 0;\n\n  const handleSize = Array.from(group.children).reduce((total, child) => {\n    const element = child as HTMLElement;\n\n    if (!element.hasAttribute(\"data-puzzle-resizable-handle\")) {\n      return total;\n    }\n\n    const rect = element.getBoundingClientRect();\n\n    return total + (isHorizontal ? rect.width : rect.height);\n  }, 0);\n\n  return Math.max(0, totalSize - paddingSize - handleSize);\n};\n\nconst getResizeDirection = (\n  element: HTMLElement,\n  orientation: ResizablePanelsOrientation,\n) => {\n  if (orientation !== \"horizontal\") {\n    return 1;\n  }\n\n  const direction =\n    element.ownerDocument.defaultView?.getComputedStyle(element).direction;\n\n  return direction === \"rtl\" ? -1 : 1;\n};\n\nconst getPointerCoordinate = (\n  event: ReactPointerEvent<HTMLDivElement>,\n  orientation: ResizablePanelsOrientation,\n) => (orientation === \"horizontal\" ? event.clientX : event.clientY);\n\nconst ResizablePanel = ({\n  id,\n  minSize = 0,\n  maxSize = 100,\n  panelIndex = 0,\n  panelSize = 1,\n  panelId,\n  className,\n  style,\n  ...props\n}: ResizablePanelProps & InternalResizablePanelProps) => (\n  <div\n    {...props}\n    id={panelId ?? id}\n    className={cn(\"puzzle-resizable-panels__panel\", className)}\n    style={{\n      ...style,\n      flex: `${panelSize} 1 0%`,\n    }}\n    data-panel-index={panelIndex}\n    data-panel-size={panelSize}\n    data-panel-min-size={minSize}\n    data-panel-max-size={maxSize}\n  />\n);\n\nconst ResizableHandle = ({\n  withGrip = false,\n  disabled = false,\n  handleIndex = -1,\n  orientation = \"horizontal\",\n  value,\n  minValue,\n  maxValue,\n  panelIds,\n  inheritedDisabled = false,\n  onResizeStart,\n  onResizeMove,\n  onResizeEnd,\n  onResizeKeyDown,\n  onPointerDown,\n  onPointerMove,\n  onPointerUp,\n  onPointerCancel,\n  onLostPointerCapture,\n  onKeyDown,\n  className,\n  children,\n  tabIndex,\n  \"aria-label\": ariaLabel,\n  ...props\n}: ResizableHandleProps & InternalResizableHandleProps) => {\n  const isDisabled = disabled || inheritedDisabled;\n\n  const handlePointerDown = (event: ReactPointerEvent<HTMLDivElement>) => {\n    onPointerDown?.(event);\n\n    if (!event.defaultPrevented && !isDisabled) {\n      onResizeStart?.(event, handleIndex);\n    }\n  };\n\n  const handlePointerMove = (event: ReactPointerEvent<HTMLDivElement>) => {\n    onPointerMove?.(event);\n\n    if (!event.defaultPrevented && !isDisabled) {\n      onResizeMove?.(event, handleIndex);\n    }\n  };\n\n  const handlePointerUp = (event: ReactPointerEvent<HTMLDivElement>) => {\n    onResizeEnd?.(event, handleIndex);\n    onPointerUp?.(event);\n  };\n\n  const handlePointerCancel = (event: ReactPointerEvent<HTMLDivElement>) => {\n    onResizeEnd?.(event, handleIndex);\n    onPointerCancel?.(event);\n  };\n\n  const handleLostPointerCapture = (\n    event: ReactPointerEvent<HTMLDivElement>,\n  ) => {\n    onResizeEnd?.(event, handleIndex);\n    onLostPointerCapture?.(event);\n  };\n\n  const handleKeyDown = (event: ReactKeyboardEvent<HTMLDivElement>) => {\n    onKeyDown?.(event);\n\n    if (!event.defaultPrevented && !isDisabled) {\n      onResizeKeyDown?.(event, handleIndex);\n    }\n  };\n\n  return (\n    <div\n      {...props}\n      className={cn(\"puzzle-resizable-panels__handle\", className)}\n      role=\"separator\"\n      tabIndex={isDisabled ? -1 : (tabIndex ?? 0)}\n      aria-label={ariaLabel ?? \"Resize panels\"}\n      aria-orientation={\n        orientation === \"horizontal\" ? \"vertical\" : \"horizontal\"\n      }\n      aria-controls={panelIds?.join(\" \")}\n      aria-valuenow={value}\n      aria-valuemin={minValue}\n      aria-valuemax={maxValue}\n      aria-valuetext={\n        value === undefined ? undefined : `${Math.round(value * 100) / 100}%`\n      }\n      aria-disabled={isDisabled || undefined}\n      data-puzzle-resizable-handle=\"\"\n      data-orientation={orientation}\n      data-disabled={isDisabled ? \"true\" : undefined}\n      onPointerDown={handlePointerDown}\n      onPointerMove={handlePointerMove}\n      onPointerUp={handlePointerUp}\n      onPointerCancel={handlePointerCancel}\n      onLostPointerCapture={handleLostPointerCapture}\n      onKeyDown={handleKeyDown}\n    >\n      {withGrip ? (\n        <span\n          className=\"puzzle-resizable-panels__handle-grip\"\n          aria-hidden=\"true\"\n        />\n      ) : (\n        children\n      )}\n    </div>\n  );\n};\n\nconst ResizablePanelsRoot = ({\n  children,\n  orientation = \"horizontal\",\n  sizes,\n  defaultSizes,\n  onSizesChange,\n  disabled = false,\n  keyboardStep = 1,\n  id,\n  role,\n  className,\n  style,\n  ref: forwardedRef,\n  ...rootProps\n}: ResizablePanelsProps) => {\n  const generatedId = useId();\n\n  const groupId = id ?? `puzzle-resizable-panels-${generatedId}`;\n\n  if (!Number.isFinite(keyboardStep) || keyboardStep <= 0) {\n    throw new RangeError(\"keyboardStep must be a positive finite number.\");\n  }\n\n  const childrenArray = Children.toArray(children);\n\n  const validChildren =\n    childrenArray.length >= 3 &&\n    childrenArray.length % 2 === 1 &&\n    childrenArray.every((child, index) =>\n      index % 2 === 0\n        ? isResizablePanelElement(child)\n        : isResizableHandleElement(child),\n    );\n\n  if (!validChildren) {\n    throw new Error(\n      \"ResizablePanels requires alternating Panel and Handle children, starting and ending with a Panel. At least two panels are required.\",\n    );\n  }\n\n  const panelElements = childrenArray.filter(isResizablePanelElement);\n\n  const panelCount = panelElements.length;\n\n  const panelConstraints: PanelSizeConstraint[] = panelElements.map(\n    (panel) => ({\n      minSize: panel.props.minSize,\n      maxSize: panel.props.maxSize,\n    }),\n  );\n\n  const panelIds = panelElements.map(\n    (panel, index) => panel.props.id ?? `${groupId}-panel-${index}`,\n  );\n\n  if (new Set(panelIds).size !== panelIds.length) {\n    throw new Error(\"ResizablePanels requires unique panel IDs.\");\n  }\n\n  const [uncontrolledSizes, setUncontrolledSizes] = useState<number[]>(() =>\n    normalizePanelSizes(\n      sizes === undefined ? defaultSizes : undefined,\n      panelConstraints,\n    ),\n  );\n\n  const layoutInput =\n    sizes ??\n    (uncontrolledSizes.length === panelCount ? uncontrolledSizes : undefined);\n\n  const currentSizes = normalizePanelSizes(layoutInput, panelConstraints);\n\n  const [isResizing, setIsResizing] = useState(false);\n\n  const groupRef = useRef<HTMLDivElement | null>(null);\n\n  const pointerDragRef = useRef<PointerDragState | null>(null);\n\n  const updateSizes = (nextSizes: readonly number[]) => {\n    const normalized = normalizePanelSizes(nextSizes, panelConstraints);\n\n    const hasChanged = normalized.some(\n      (size, index) => Math.abs(size - currentSizes[index]) > 0.000001,\n    );\n\n    if (!hasChanged) {\n      return;\n    }\n\n    if (sizes === undefined) {\n      setUncontrolledSizes(normalized);\n    }\n\n    onSizesChange?.(normalized);\n  };\n\n  const handlePointerDown: ResizePointerHandler = (event, handleIndex) => {\n    const group = groupRef.current;\n\n    if (!group || disabled) {\n      return;\n    }\n\n    if (\n      event.button !== 0 &&\n      event.pointerType !== \"touch\" &&\n      event.pointerType !== \"pen\"\n    ) {\n      return;\n    }\n\n    const availableSize = getAvailableSize(group, orientation);\n\n    if (availableSize <= 0) {\n      return;\n    }\n\n    pointerDragRef.current = {\n      handleIndex,\n      pointerId: event.pointerId,\n      startCoordinate: getPointerCoordinate(event, orientation),\n      availableSize,\n      direction: getResizeDirection(group, orientation),\n      sizes: [...currentSizes],\n    };\n\n    try {\n      event.currentTarget.setPointerCapture(event.pointerId);\n    } catch {\n      // Synthetic pointer events and detached elements may not\n      // support pointer capture.\n    }\n\n    event.preventDefault();\n    setIsResizing(true);\n  };\n\n  const handlePointerMove: ResizePointerHandler = (event, handleIndex) => {\n    const drag = pointerDragRef.current;\n\n    if (\n      !drag ||\n      drag.pointerId !== event.pointerId ||\n      drag.handleIndex !== handleIndex\n    ) {\n      return;\n    }\n\n    const currentCoordinate = getPointerCoordinate(event, orientation);\n\n    const delta =\n      ((currentCoordinate - drag.startCoordinate) / drag.availableSize) *\n      100 *\n      drag.direction;\n\n    const nextSizes = resizePanelPair(\n      drag.sizes,\n      panelConstraints,\n      handleIndex,\n      delta,\n    );\n\n    event.preventDefault();\n    updateSizes(nextSizes);\n  };\n\n  const handlePointerEnd: ResizePointerHandler = (event, handleIndex) => {\n    const drag = pointerDragRef.current;\n\n    if (\n      !drag ||\n      drag.pointerId !== event.pointerId ||\n      drag.handleIndex !== handleIndex\n    ) {\n      return;\n    }\n\n    pointerDragRef.current = null;\n    setIsResizing(false);\n  };\n\n  const handleKeyDown: ResizeKeyboardHandler = (event, handleIndex) => {\n    if (disabled) {\n      return;\n    }\n\n    const currentSize = currentSizes[handleIndex];\n\n    const bounds = getPanelPairBounds(\n      currentSizes,\n      panelConstraints,\n      handleIndex,\n    );\n\n    const group = groupRef.current;\n\n    const direction = group ? getResizeDirection(group, orientation) : 1;\n\n    const step = keyboardStep * (event.shiftKey ? 10 : 1);\n\n    let nextSize: number | undefined;\n\n    if (event.key === \"Home\") {\n      nextSize = bounds.minSize;\n    } else if (event.key === \"End\") {\n      nextSize = bounds.maxSize;\n    } else if (orientation === \"horizontal\") {\n      if (event.key === \"ArrowRight\") {\n        nextSize = currentSize + step * direction;\n      } else if (event.key === \"ArrowLeft\") {\n        nextSize = currentSize - step * direction;\n      }\n    } else {\n      if (event.key === \"ArrowDown\") {\n        nextSize = currentSize + step;\n      } else if (event.key === \"ArrowUp\") {\n        nextSize = currentSize - step;\n      }\n    }\n\n    if (nextSize === undefined) {\n      return;\n    }\n\n    event.preventDefault();\n\n    updateSizes(\n      resizePanelPair(\n        currentSizes,\n        panelConstraints,\n        handleIndex,\n        nextSize - currentSize,\n      ),\n    );\n  };\n\n  let panelIndex = 0;\n\n  const enhancedChildren = childrenArray.map((child) => {\n    if (isResizablePanelElement(child)) {\n      const index = panelIndex++;\n\n      return cloneElement(\n        child as ReactElement<\n          ResizablePanelProps & InternalResizablePanelProps\n        >,\n        {\n          panelIndex: index,\n          panelSize: currentSizes[index],\n          panelId: panelIds[index],\n        },\n      );\n    }\n\n    const handleIndex = panelIndex - 1;\n\n    const bounds = getPanelPairBounds(\n      currentSizes,\n      panelConstraints,\n      handleIndex,\n    );\n\n    return cloneElement(\n      child as ReactElement<\n        ResizableHandleProps & InternalResizableHandleProps\n      >,\n      {\n        handleIndex,\n        orientation,\n        value: currentSizes[handleIndex],\n        minValue: bounds.minSize,\n        maxValue: bounds.maxSize,\n        panelIds: [panelIds[handleIndex], panelIds[handleIndex + 1]],\n        inheritedDisabled: disabled,\n        onResizeStart: handlePointerDown,\n        onResizeMove: handlePointerMove,\n        onResizeEnd: handlePointerEnd,\n        onResizeKeyDown: handleKeyDown,\n      },\n    );\n  });\n\n  return (\n    <div\n      {...rootProps}\n      ref={(node) => {\n        groupRef.current = node;\n\n        if (typeof forwardedRef === \"function\") {\n          forwardedRef(node);\n        } else if (forwardedRef) {\n          forwardedRef.current = node;\n        }\n      }}\n      id={groupId}\n      role={role ?? \"group\"}\n      className={cn(\"puzzle-resizable-panels\", className)}\n      style={style}\n      data-orientation={orientation}\n      data-disabled={disabled ? \"true\" : undefined}\n      data-resizing={isResizing ? \"true\" : undefined}\n    >\n      {enhancedChildren}\n    </div>\n  );\n};\n\ntype ResizablePanelsComponent = typeof ResizablePanelsRoot & {\n  Panel: typeof ResizablePanel;\n  Handle: typeof ResizableHandle;\n};\n\nconst ResizablePanels = Object.assign(ResizablePanelsRoot, {\n  Panel: ResizablePanel,\n  Handle: ResizableHandle,\n}) as ResizablePanelsComponent;\n\nexport {\n  ResizablePanels,\n  ResizablePanel,\n  ResizableHandle,\n  type ResizablePanelsProps,\n  type ResizablePanelProps,\n  type ResizableHandleProps,\n  type ResizablePanelsOrientation,\n};\n"],"mappings":"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"}

package/dist/components/layout/resizable-panels/index.d.cts

@@ -0,0 +1,59 @@
+import { ComponentPropsWithRef, KeyboardEvent, PointerEvent, ReactNode } from "react";
+type ResizablePanelsOrientation = "horizontal" | "vertical";
+type ResizablePanelsProps = Omit<ComponentPropsWithRef<"div">, "children"> & {
+  /** Layout direction. Defaults to horizontal. */
+  orientation?: ResizablePanelsOrientation;
+  /** Controlled panel sizes, expressed as percentages. */
+  sizes?: readonly number[];
+  /** Initial panel sizes for uncontrolled usage. */
+  defaultSizes?: readonly number[];
+  /** Called whenever the panel layout changes. */
+  onSizesChange?: (sizes: number[]) => void;
+  /** Disables all resizing interactions. */
+  disabled?: boolean;
+  /** Percentage change per keyboard interaction. Defaults to 1. */
+  keyboardStep?: number;
+  /** Panels and handles that make up the group. */
+  children: ReactNode;
+};
+type ResizablePanelProps = ComponentPropsWithRef<"div"> & {
+  /** Minimum panel size in percentages. Defaults to 0. */
+  minSize?: number;
+  /** Maximum panel size in percentages. Defaults to 100. */
+  maxSize?: number;
+};
+type ResizableHandleProps = ComponentPropsWithRef<"div"> & {
+  /** Renders a visible grip inside the resize handle. */
+  withGrip?: boolean;
+  /** Disables resizing through this handle. */
+  disabled?: boolean;
+};
+type ResizePointerHandler = (event: PointerEvent<HTMLDivElement>, handleIndex: number) => void;
+type ResizeKeyboardHandler = (event: KeyboardEvent<HTMLDivElement>, handleIndex: number) => void;
+type InternalResizablePanelProps = {
+  panelIndex?: number;
+  panelSize?: number;
+  panelId?: string;
+};
+type InternalResizableHandleProps = {
+  handleIndex?: number;
+  orientation?: ResizablePanelsOrientation;
+  value?: number;
+  minValue?: number;
+  maxValue?: number;
+  panelIds?: [string, string];
+  inheritedDisabled?: boolean;
+  onResizeStart?: ResizePointerHandler;
+  onResizeMove?: ResizePointerHandler;
+  onResizeEnd?: ResizePointerHandler;
+  onResizeKeyDown?: ResizeKeyboardHandler;
+};
+declare const ResizablePanel: ({ id, minSize, maxSize, panelIndex, panelSize, panelId, className, style, ...props }: ResizablePanelProps & InternalResizablePanelProps) => import("react").JSX.Element;
+declare const ResizableHandle: ({ withGrip, disabled, handleIndex, orientation, value, minValue, maxValue, panelIds, inheritedDisabled, onResizeStart, onResizeMove, onResizeEnd, onResizeKeyDown, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onLostPointerCapture, onKeyDown, className, children, tabIndex, "aria-label": ariaLabel, ...props }: ResizableHandleProps & InternalResizableHandleProps) => import("react").JSX.Element;
+declare const ResizablePanelsRoot: ({ children, orientation, sizes, defaultSizes, onSizesChange, disabled, keyboardStep, id, role, className, style, ref: forwardedRef, ...rootProps }: ResizablePanelsProps) => import("react").JSX.Element;
+type ResizablePanelsComponent = typeof ResizablePanelsRoot & {
+  Panel: typeof ResizablePanel;
+  Handle: typeof ResizableHandle;
+};
+declare const ResizablePanels: ResizablePanelsComponent;
+export { ResizableHandle, type ResizableHandleProps, ResizablePanel, type ResizablePanelProps, ResizablePanels, type ResizablePanelsOrientation, type ResizablePanelsProps };

package/dist/components/layout/resizable-panels/index.d.ts

@@ -0,0 +1,59 @@
+import { ComponentPropsWithRef, KeyboardEvent, PointerEvent, ReactNode } from "react";
+type ResizablePanelsOrientation = "horizontal" | "vertical";
+type ResizablePanelsProps = Omit<ComponentPropsWithRef<"div">, "children"> & {
+  /** Layout direction. Defaults to horizontal. */
+  orientation?: ResizablePanelsOrientation;
+  /** Controlled panel sizes, expressed as percentages. */
+  sizes?: readonly number[];
+  /** Initial panel sizes for uncontrolled usage. */
+  defaultSizes?: readonly number[];
+  /** Called whenever the panel layout changes. */
+  onSizesChange?: (sizes: number[]) => void;
+  /** Disables all resizing interactions. */
+  disabled?: boolean;
+  /** Percentage change per keyboard interaction. Defaults to 1. */
+  keyboardStep?: number;
+  /** Panels and handles that make up the group. */
+  children: ReactNode;
+};
+type ResizablePanelProps = ComponentPropsWithRef<"div"> & {
+  /** Minimum panel size in percentages. Defaults to 0. */
+  minSize?: number;
+  /** Maximum panel size in percentages. Defaults to 100. */
+  maxSize?: number;
+};
+type ResizableHandleProps = ComponentPropsWithRef<"div"> & {
+  /** Renders a visible grip inside the resize handle. */
+  withGrip?: boolean;
+  /** Disables resizing through this handle. */
+  disabled?: boolean;
+};
+type ResizePointerHandler = (event: PointerEvent<HTMLDivElement>, handleIndex: number) => void;
+type ResizeKeyboardHandler = (event: KeyboardEvent<HTMLDivElement>, handleIndex: number) => void;
+type InternalResizablePanelProps = {
+  panelIndex?: number;
+  panelSize?: number;
+  panelId?: string;
+};
+type InternalResizableHandleProps = {
+  handleIndex?: number;
+  orientation?: ResizablePanelsOrientation;
+  value?: number;
+  minValue?: number;
+  maxValue?: number;
+  panelIds?: [string, string];
+  inheritedDisabled?: boolean;
+  onResizeStart?: ResizePointerHandler;
+  onResizeMove?: ResizePointerHandler;
+  onResizeEnd?: ResizePointerHandler;
+  onResizeKeyDown?: ResizeKeyboardHandler;
+};
+declare const ResizablePanel: ({ id, minSize, maxSize, panelIndex, panelSize, panelId, className, style, ...props }: ResizablePanelProps & InternalResizablePanelProps) => import("react").JSX.Element;
+declare const ResizableHandle: ({ withGrip, disabled, handleIndex, orientation, value, minValue, maxValue, panelIds, inheritedDisabled, onResizeStart, onResizeMove, onResizeEnd, onResizeKeyDown, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onLostPointerCapture, onKeyDown, className, children, tabIndex, "aria-label": ariaLabel, ...props }: ResizableHandleProps & InternalResizableHandleProps) => import("react").JSX.Element;
+declare const ResizablePanelsRoot: ({ children, orientation, sizes, defaultSizes, onSizesChange, disabled, keyboardStep, id, role, className, style, ref: forwardedRef, ...rootProps }: ResizablePanelsProps) => import("react").JSX.Element;
+type ResizablePanelsComponent = typeof ResizablePanelsRoot & {
+  Panel: typeof ResizablePanel;
+  Handle: typeof ResizableHandle;
+};
+declare const ResizablePanels: ResizablePanelsComponent;
+export { ResizableHandle, type ResizableHandleProps, ResizablePanel, type ResizablePanelProps, ResizablePanels, type ResizablePanelsOrientation, type ResizablePanelsProps };