@puzzle-ui/ui 0.0.0-stage → 0.2.0

package/dist/components/navigation/tree-view/tree-view.css

@@ -0,0 +1,258 @@
+.puzzle-tree {
+  --puzzle-tree-indentation: var(--puzzle-space-4, 1rem);
+  --puzzle-tree-row-height: var(--puzzle-space-8, 2rem);
+  --puzzle-tree-toggle-size: var(--puzzle-space-6, 1.5rem);
+  --puzzle-tree-row-gap: 0;
+  --puzzle-tree-duration: var(--puzzle-duration-fast, .12s);
+  --puzzle-tree-easing: var(--puzzle-easing-standard, ease);
+  gap: var(--puzzle-tree-row-gap);
+  min-width: 0;
+  color: var(--puzzle-color-text, #171717);
+  font-family: var(--puzzle-font-family-body2, inherit);
+  font-size: var(--puzzle-font-size-body2, .875rem);
+  line-height: var(--puzzle-font-line-height-body2, 1.5);
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+}
+
+.puzzle-tree__item {
+  outline: none;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.puzzle-tree__row {
+  align-items: center;
+  gap: var(--puzzle-space-1, .25rem);
+  min-width: 0;
+  min-height: var(--puzzle-tree-row-height);
+  padding-block: 0;
+  padding-inline: var(--puzzle-space-1, .25rem);
+  border-radius: var(--puzzle-radius-sm, .25rem);
+  color: inherit;
+  cursor: default;
+  user-select: none;
+  touch-action: manipulation;
+  transition: background-color var(--puzzle-tree-duration) var(--puzzle-tree-easing),
+        color var(--puzzle-tree-duration) var(--puzzle-tree-easing);
+  display: flex;
+}
+
+.puzzle-tree__item:not([aria-disabled="true"]) > .puzzle-tree__row {
+  cursor: pointer;
+}
+
+.puzzle-tree__item:not([aria-disabled="true"]):hover > .puzzle-tree__row {
+  background: var(--puzzle-color-surface-sunken);
+}
+
+.puzzle-tree__item[data-selected="true"] > .puzzle-tree__row {
+  background: color-mix(in srgb, var(--puzzle-color-primary) 12%, transparent);
+  color: var(--puzzle-color-text);
+}
+
+.puzzle-tree__item:focus-visible > .puzzle-tree__row {
+  outline: 2px solid var(--puzzle-color-ring);
+  outline-offset: -2px;
+}
+
+.puzzle-tree__item[aria-disabled="true"] > .puzzle-tree__row {
+  color: var(--puzzle-color-text-muted);
+  cursor: default;
+}
+
+.puzzle-tree__toggle, .puzzle-tree__toggle-spacer {
+  flex: 0 0 var(--puzzle-tree-toggle-size);
+  width: var(--puzzle-tree-toggle-size);
+  height: var(--puzzle-tree-toggle-size);
+  justify-content: center;
+  align-items: center;
+  display: inline-flex;
+}
+
+.puzzle-tree__toggle {
+  border-radius: var(--puzzle-radius-sm, .125rem);
+  color: var(--puzzle-color-text-muted);
+  cursor: pointer;
+  font-weight: bold;
+}
+
+.puzzle-tree__toggle:before {
+  border: 0;
+  border-inline-end: var(--puzzle-border-width-strong, 2px) solid currentColor;
+  border-block-end: var(--puzzle-border-width-strong, 2px) solid currentColor;
+  content: "";
+  width: .375rem;
+  height: .375rem;
+  transition: transform var(--puzzle-tree-duration) var(--puzzle-tree-easing);
+  transform: rotate(-45deg);
+}
+
+.puzzle-tree__toggle[data-expanded="true"]:before {
+  transform: translateY(-.125rem) rotate(45deg);
+}
+
+.puzzle-tree__label, .puzzle-tree__label > a {
+  color: var(--puzzle-color-text);
+}
+
+.puzzle-tree__item > .puzzle-tree__row:has(.puzzle-tree__toggle) .puzzle-tree__label, .puzzle-tree__item[data-selected="true"] > .puzzle-tree__row .puzzle-tree__label {
+  font-weight: bold;
+}
+
+.puzzle-tree__item[data-expanded="true"] > .puzzle-tree__row .puzzle-tree__toggle {
+  color: var(--puzzle-color-text);
+}
+
+.puzzle-tree__item[data-selected="true"] > .puzzle-tree__row {
+  background: color-mix(in srgb, var(--puzzle-color-primary) 8%, transparent);
+}
+
+.puzzle-tree__icon {
+  width: 1rem;
+  height: 1rem;
+  color: var(--puzzle-color-text-muted);
+  flex: none;
+  justify-content: center;
+  align-items: center;
+  display: inline-flex;
+}
+
+.puzzle-tree__icon > svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.puzzle-tree__label {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: auto;
+  min-width: 0;
+  display: block;
+  overflow: hidden;
+}
+
+.puzzle-tree__adornment {
+  align-items: center;
+  gap: var(--puzzle-space-1, .25rem);
+  color: var(--puzzle-color-text-muted);
+  flex: none;
+  margin-inline-start: auto;
+  display: inline-flex;
+}
+
+.puzzle-tree__group {
+  gap: var(--puzzle-tree-row-gap);
+  min-width: 0;
+  border-inline-start: var(--puzzle-border-width, 1px) solid var(--puzzle-color-border);
+  flex-direction: column;
+  margin-block-start: 0;
+  margin-inline-start: var(--puzzle-tree-indentation);
+  padding: 0;
+  list-style: none;
+  display: flex;
+}
+
+.puzzle-tree__status-row {
+  padding-block: var(--puzzle-space-1, .25rem);
+  padding-inline: var(--puzzle-space-3, .75rem);
+  color: var(--puzzle-color-text-muted);
+  font-size: var(--puzzle-font-size-sm, .875rem);
+  list-style: none;
+}
+
+.puzzle-tree__status-row [role="status"] {
+  align-items: center;
+  gap: var(--puzzle-space-2, .5rem);
+  display: inline-flex;
+}
+
+.puzzle-tree__status-row:not(.puzzle-tree__status-row--error) [role="status"]:before {
+  border: var(--puzzle-border-width-strong, 2px) solid var(--puzzle-color-border-strong);
+  border-block-start-color: var(--puzzle-color-primary);
+  border-radius: var(--puzzle-radius-full, 9999px);
+  content: "";
+  width: .75rem;
+  height: .75rem;
+  animation: .8s linear infinite puzzle-tree-spin;
+}
+
+.puzzle-tree--sm {
+  --puzzle-tree-row-height: var(--puzzle-space-7, 1.75rem);
+  --puzzle-tree-row-gap: 0;
+}
+
+.puzzle-tree--md {
+  --puzzle-tree-row-height: var(--puzzle-space-8, 2rem);
+}
+
+@keyframes puzzle-tree-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .puzzle-tree__row, .puzzle-tree__toggle:before {
+    transition: none;
+  }
+
+  .puzzle-tree__status-row:not(.puzzle-tree__status-row--error) [role="status"]:before {
+    border-block-start-color: var(--puzzle-color-border-strong);
+    animation: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .puzzle-tree__item[data-selected="true"] > .puzzle-tree__row {
+    outline-offset: -1px;
+    outline: 1px solid highlight;
+  }
+
+  .puzzle-tree__toggle:before {
+    border-color: buttontext;
+  }
+
+  .puzzle-tree__item[aria-disabled="true"] > .puzzle-tree__row {
+    color: graytext;
+  }
+}
+
+:dir(rtl) .puzzle-tree__toggle:before {
+  transform: rotate(135deg);
+}
+
+:dir(rtl) .puzzle-tree__toggle[data-expanded="true"]:before {
+  transform: translateY(-.125rem) rotate(225deg);
+}
+
+.puzzle-tree__row.puzzle-link, .puzzle-tree__row.puzzle-link:hover {
+  color: inherit;
+  text-decoration: none;
+}
+
+.puzzle-tree__row.puzzle-link:active {
+  opacity: 1;
+}
+
+.puzzle-tree__item[data-active="true"] > .puzzle-tree__row, .puzzle-tree__item:has( > .puzzle-tree__row[aria-current="page"]) > .puzzle-tree__row {
+  background: color-mix(in srgb, var(--puzzle-color-primary) 12%, transparent);
+  color: var(--puzzle-color-text);
+}
+
+.puzzle-tree__item[data-active="true"] > .puzzle-tree__row .puzzle-tree__label, .puzzle-tree__item:has( > .puzzle-tree__row[aria-current="page"]) > .puzzle-tree__row .puzzle-tree__label {
+  font-weight: bold;
+}
+
+@media (forced-colors: active) {
+  .puzzle-tree__item[data-active="true"] > .puzzle-tree__row, .puzzle-tree__item:has( > .puzzle-tree__row[aria-current="page"]) > .puzzle-tree__row {
+    outline-offset: -1px;
+    outline: 1px solid highlight;
+  }
+}

package/dist/components/overlays/backdrop/backdrop.css

@@ -0,0 +1,10 @@
+.puzzle-backdrop {
+  z-index: var(--puzzle-z-index-overlay, 1200);
+  background-color: var(--puzzle-overlay-backdrop, #00000059);
+  backdrop-filter: blur(var(--puzzle-overlay-backdrop-blur, 2px));
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  position: fixed;
+  inset: 0;
+}

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

@@ -0,0 +1,70 @@
+"use client";
+;/* empty css               */
+const require_index = require("../../utilities/transition/index.cjs");
+const require_index$1 = require("../../utilities/scroll-lock/index.cjs");
+const require_index$2 = require("../overlay-stack/index.cjs");
+let _puzzle_ui_core = require("@puzzle-ui/core");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+// src/components/overlays/backdrop/index.tsx
+const Backdrop = ({ as, open = true, modal = false, closeOnBackdrop = true, closeOnEscape = true, onClose, className, children, onClick, ...props }) => {
+	const Component = as ?? "div";
+	const rootRef = (0, react.useRef)(null);
+	const registrationRef = (0, react.useRef)(null);
+	const [rootElement, setRootElement] = (0, react.useState)(null);
+	const parentPriority = require_index$2.useOverlayPriority();
+	const classes = (0, _puzzle_ui_core.cn)("puzzle-backdrop", className);
+	const forwardedRef = props.ref;
+	const componentProps = { ...props };
+	delete componentProps.ref;
+	const setRootRef = (0, react.useCallback)((node) => {
+		rootRef.current = node;
+		setRootElement(node);
+		if (typeof forwardedRef === "function") forwardedRef(node);
+		else if (forwardedRef) forwardedRef.current = node;
+	}, [forwardedRef]);
+	(0, react.useEffect)(() => {
+		if (!open || !rootElement) return;
+		const unregister = require_index$2.registerOverlay(rootElement.ownerDocument, () => {
+			if (closeOnEscape) onClose?.();
+		}, parentPriority, {
+			modal,
+			getContent: () => rootRef.current?.querySelector("[data-overlay-content]") ?? rootRef.current,
+			getLayer: () => rootRef.current
+		});
+		registrationRef.current = unregister;
+		return () => {
+			unregister();
+			if (registrationRef.current === unregister) registrationRef.current = null;
+		};
+	}, [
+		open,
+		rootElement,
+		modal,
+		closeOnEscape,
+		onClose,
+		parentPriority
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_index$2.OverlayStackProvider, {
+		priority: parentPriority + 1,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$1.ScrollLock, { enabled: open && modal }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.Transition, {
+			visible: open,
+			template: "fade",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
+				...componentProps,
+				ref: setRootRef,
+				className: classes,
+				onClick: (event) => {
+					onClick?.(event);
+					if (event.defaultPrevented || !closeOnBackdrop || event.target !== event.currentTarget || !registrationRef.current?.isTop()) return;
+					event.stopPropagation();
+					onClose?.();
+				},
+				children
+			})
+		})]
+	});
+};
+exports.Backdrop = Backdrop;
+
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["useRef","useState","useOverlayPriority","cn","useCallback","registerOverlay","OverlayStackProvider","ScrollLock","Transition"],"sources":["../../../../src/components/overlays/backdrop/index.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type ElementType,\n  type Ref,\n} from \"react\";\n\nimport { cn } from \"@puzzle-ui/core\";\n\nimport \"./backdrop.css\";\n\nimport { Transition } from \"../../utilities/transition\";\nimport { ScrollLock } from \"../../utilities/scroll-lock\";\n\nimport {\n  OverlayStackProvider,\n  registerOverlay,\n  useOverlayPriority,\n  type OverlayRegistration,\n} from \"../overlay-stack\";\n\ntype BackdropOwnProps<C extends ElementType> = {\n  as?: C;\n  open?: boolean;\n  modal?: boolean;\n  closeOnBackdrop?: boolean;\n  closeOnEscape?: boolean;\n  onClose?: () => void;\n};\n\ntype BackdropProps<C extends ElementType = \"div\"> = BackdropOwnProps<C> &\n  Omit<ComponentPropsWithRef<C>, keyof BackdropOwnProps<C> | \"as\">;\n\nconst Backdrop = <C extends ElementType = \"div\">({\n  as,\n  open = true,\n  modal = false,\n  closeOnBackdrop = true,\n  closeOnEscape = true,\n  onClose,\n  className,\n  children,\n  onClick,\n  ...props\n}: BackdropProps<C>) => {\n  const Component = as ?? \"div\";\n\n  const rootRef = useRef<HTMLElement | null>(null);\n  const registrationRef = useRef<OverlayRegistration | null>(null);\n\n  // Track the actual mounted element. Transition may mount it\n  // after the initial render when open changes from false to true.\n  const [rootElement, setRootElement] = useState<HTMLElement | null>(null);\n\n  const parentPriority = useOverlayPriority();\n  const classes = cn(\"puzzle-backdrop\", className);\n\n  const forwardedRef = (props as { ref?: Ref<HTMLElement> }).ref;\n  const componentProps = { ...props };\n\n  delete (componentProps as { ref?: Ref<HTMLElement> }).ref;\n\n  const setRootRef = useCallback(\n    (node: HTMLElement | null) => {\n      rootRef.current = node;\n      setRootElement(node);\n\n      if (typeof forwardedRef === \"function\") {\n        forwardedRef(node);\n      } else if (forwardedRef) {\n        forwardedRef.current = node;\n      }\n    },\n    [forwardedRef],\n  );\n\n  useEffect(() => {\n    if (!open || !rootElement) {\n      return;\n    }\n\n    const unregister = registerOverlay(\n      rootElement.ownerDocument,\n      () => {\n        if (closeOnEscape) {\n          onClose?.();\n        }\n      },\n      parentPriority,\n      {\n        modal,\n        getContent: () =>\n          rootRef.current?.querySelector<HTMLElement>(\n            \"[data-overlay-content]\",\n          ) ?? rootRef.current,\n        getLayer: () => rootRef.current,\n      },\n    );\n\n    registrationRef.current = unregister;\n\n    return () => {\n      unregister();\n\n      if (registrationRef.current === unregister) {\n        registrationRef.current = null;\n      }\n    };\n  }, [open, rootElement, modal, closeOnEscape, onClose, parentPriority]);\n\n  return (\n    <OverlayStackProvider priority={parentPriority + 1}>\n      <ScrollLock enabled={open && modal} />\n\n      <Transition visible={open} template=\"fade\">\n        <Component\n          {...componentProps}\n          ref={setRootRef as never}\n          className={classes}\n          onClick={(event) => {\n            onClick?.(event);\n\n            if (\n              event.defaultPrevented ||\n              !closeOnBackdrop ||\n              event.target !== event.currentTarget ||\n              !registrationRef.current?.isTop()\n            ) {\n              return;\n            }\n\n            event.stopPropagation();\n            onClose?.();\n          }}\n        >\n          {children}\n        </Component>\n      </Transition>\n    </OverlayStackProvider>\n  );\n};\n\nexport { Backdrop, type BackdropProps };\n"],"mappings":";;;;;;;;;AAsCA,MAAM,YAA2C,EAC/C,IACA,OAAO,MACP,QAAQ,OACR,kBAAkB,MAClB,gBAAgB,MAChB,SACA,WACA,UACA,SACA,GAAG,YACmB;CACtB,MAAM,YAAY,MAAM;CAExB,MAAM,WAAA,GAAUA,MAAAA,OAAAA,CAA2B,IAAI;CAC/C,MAAM,mBAAA,GAAkBA,MAAAA,OAAAA,CAAmC,IAAI;CAI/D,MAAM,CAAC,aAAa,mBAAA,GAAkBC,MAAAA,SAAAA,CAA6B,IAAI;CAEvE,MAAM,iBAAiBC,gBAAAA,mBAAmB;CAC1C,MAAM,WAAA,GAAUC,gBAAAA,GAAAA,CAAG,mBAAmB,SAAS;CAE/C,MAAM,eAAgB,MAAqC;CAC3D,MAAM,iBAAiB,EAAE,GAAG,MAAM;CAElC,OAAQ,eAA8C;CAEtD,MAAM,cAAA,GAAaC,MAAAA,YAAAA,EAChB,SAA6B;EAC5B,QAAQ,UAAU;EAClB,eAAe,IAAI;EAEnB,IAAI,OAAO,iBAAiB,YAC1B,aAAa,IAAI;OACZ,IAAI,cACT,aAAa,UAAU;CAE3B,GACA,CAAC,YAAY,CACf;CAEA,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,IAAI,CAAC,QAAQ,CAAC,aACZ;EAGF,MAAM,aAAaC,gBAAAA,gBACjB,YAAY,qBACN;GACJ,IAAI,eACF,UAAU;EAEd,GACA,gBACA;GACE;GACA,kBACE,QAAQ,SAAS,cACf,wBACF,KAAK,QAAQ;GACf,gBAAgB,QAAQ;EAC1B,CACF;EAEA,gBAAgB,UAAU;EAE1B,aAAa;GACX,WAAW;GAEX,IAAI,gBAAgB,YAAY,YAC9B,gBAAgB,UAAU;EAE9B;CACF,GAAG;EAAC;EAAM;EAAa;EAAO;EAAe;EAAS;CAAc,CAAC;CAErE,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,gBAAAA,sBAAD;EAAsB,UAAU,iBAAiB;EAAjD,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,gBAAAA,YAAD,EAAY,SAAS,QAAQ,MAAQ,CAAA,GAErC,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,YAAD;GAAY,SAAS;GAAM,UAAS;GAClC,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,WAAD;IACE,GAAI;IACJ,KAAK;IACL,WAAW;IACX,UAAU,UAAU;KAClB,UAAU,KAAK;KAEf,IACE,MAAM,oBACN,CAAC,mBACD,MAAM,WAAW,MAAM,iBACvB,CAAC,gBAAgB,SAAS,MAAM,GAEhC;KAGF,MAAM,gBAAgB;KACtB,UAAU;IACZ;IAEC;GACQ,CAAA;EACD,CAAA,CACQ;;AAE1B"}

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

@@ -0,0 +1,12 @@
+import { ComponentPropsWithRef, ElementType } from "react";
+type BackdropOwnProps<C extends ElementType> = {
+  as?: C;
+  open?: boolean;
+  modal?: boolean;
+  closeOnBackdrop?: boolean;
+  closeOnEscape?: boolean;
+  onClose?: () => void;
+};
+type BackdropProps<C extends ElementType = "div"> = BackdropOwnProps<C> & Omit<ComponentPropsWithRef<C>, keyof BackdropOwnProps<C> | "as">;
+declare const Backdrop: <C extends ElementType = "div">({ as, open, modal, closeOnBackdrop, closeOnEscape, onClose, className, children, onClick, ...props }: BackdropProps<C>) => import("react").JSX.Element;
+export { Backdrop, type BackdropProps };

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

@@ -0,0 +1,12 @@
+import { ComponentPropsWithRef, ElementType } from "react";
+type BackdropOwnProps<C extends ElementType> = {
+  as?: C;
+  open?: boolean;
+  modal?: boolean;
+  closeOnBackdrop?: boolean;
+  closeOnEscape?: boolean;
+  onClose?: () => void;
+};
+type BackdropProps<C extends ElementType = "div"> = BackdropOwnProps<C> & Omit<ComponentPropsWithRef<C>, keyof BackdropOwnProps<C> | "as">;
+declare const Backdrop: <C extends ElementType = "div">({ as, open, modal, closeOnBackdrop, closeOnEscape, onClose, className, children, onClick, ...props }: BackdropProps<C>) => import("react").JSX.Element;
+export { Backdrop, type BackdropProps };

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

@@ -0,0 +1,70 @@
+"use client";
+import "./backdrop.css";
+import { Transition } from "../../utilities/transition/index.js";
+import { ScrollLock } from "../../utilities/scroll-lock/index.js";
+import { OverlayStackProvider, registerOverlay, useOverlayPriority } from "../overlay-stack/index.js";
+import { cn } from "@puzzle-ui/core";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/overlays/backdrop/index.tsx
+const Backdrop = ({ as, open = true, modal = false, closeOnBackdrop = true, closeOnEscape = true, onClose, className, children, onClick, ...props }) => {
+	const Component = as ?? "div";
+	const rootRef = useRef(null);
+	const registrationRef = useRef(null);
+	const [rootElement, setRootElement] = useState(null);
+	const parentPriority = useOverlayPriority();
+	const classes = cn("puzzle-backdrop", className);
+	const forwardedRef = props.ref;
+	const componentProps = { ...props };
+	delete componentProps.ref;
+	const setRootRef = useCallback((node) => {
+		rootRef.current = node;
+		setRootElement(node);
+		if (typeof forwardedRef === "function") forwardedRef(node);
+		else if (forwardedRef) forwardedRef.current = node;
+	}, [forwardedRef]);
+	useEffect(() => {
+		if (!open || !rootElement) return;
+		const unregister = registerOverlay(rootElement.ownerDocument, () => {
+			if (closeOnEscape) onClose?.();
+		}, parentPriority, {
+			modal,
+			getContent: () => rootRef.current?.querySelector("[data-overlay-content]") ?? rootRef.current,
+			getLayer: () => rootRef.current
+		});
+		registrationRef.current = unregister;
+		return () => {
+			unregister();
+			if (registrationRef.current === unregister) registrationRef.current = null;
+		};
+	}, [
+		open,
+		rootElement,
+		modal,
+		closeOnEscape,
+		onClose,
+		parentPriority
+	]);
+	return /* @__PURE__ */ jsxs(OverlayStackProvider, {
+		priority: parentPriority + 1,
+		children: [/* @__PURE__ */ jsx(ScrollLock, { enabled: open && modal }), /* @__PURE__ */ jsx(Transition, {
+			visible: open,
+			template: "fade",
+			children: /* @__PURE__ */ jsx(Component, {
+				...componentProps,
+				ref: setRootRef,
+				className: classes,
+				onClick: (event) => {
+					onClick?.(event);
+					if (event.defaultPrevented || !closeOnBackdrop || event.target !== event.currentTarget || !registrationRef.current?.isTop()) return;
+					event.stopPropagation();
+					onClose?.();
+				},
+				children
+			})
+		})]
+	});
+};
+export { Backdrop };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/overlays/backdrop/index.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type ElementType,\n  type Ref,\n} from \"react\";\n\nimport { cn } from \"@puzzle-ui/core\";\n\nimport \"./backdrop.css\";\n\nimport { Transition } from \"../../utilities/transition\";\nimport { ScrollLock } from \"../../utilities/scroll-lock\";\n\nimport {\n  OverlayStackProvider,\n  registerOverlay,\n  useOverlayPriority,\n  type OverlayRegistration,\n} from \"../overlay-stack\";\n\ntype BackdropOwnProps<C extends ElementType> = {\n  as?: C;\n  open?: boolean;\n  modal?: boolean;\n  closeOnBackdrop?: boolean;\n  closeOnEscape?: boolean;\n  onClose?: () => void;\n};\n\ntype BackdropProps<C extends ElementType = \"div\"> = BackdropOwnProps<C> &\n  Omit<ComponentPropsWithRef<C>, keyof BackdropOwnProps<C> | \"as\">;\n\nconst Backdrop = <C extends ElementType = \"div\">({\n  as,\n  open = true,\n  modal = false,\n  closeOnBackdrop = true,\n  closeOnEscape = true,\n  onClose,\n  className,\n  children,\n  onClick,\n  ...props\n}: BackdropProps<C>) => {\n  const Component = as ?? \"div\";\n\n  const rootRef = useRef<HTMLElement | null>(null);\n  const registrationRef = useRef<OverlayRegistration | null>(null);\n\n  // Track the actual mounted element. Transition may mount it\n  // after the initial render when open changes from false to true.\n  const [rootElement, setRootElement] = useState<HTMLElement | null>(null);\n\n  const parentPriority = useOverlayPriority();\n  const classes = cn(\"puzzle-backdrop\", className);\n\n  const forwardedRef = (props as { ref?: Ref<HTMLElement> }).ref;\n  const componentProps = { ...props };\n\n  delete (componentProps as { ref?: Ref<HTMLElement> }).ref;\n\n  const setRootRef = useCallback(\n    (node: HTMLElement | null) => {\n      rootRef.current = node;\n      setRootElement(node);\n\n      if (typeof forwardedRef === \"function\") {\n        forwardedRef(node);\n      } else if (forwardedRef) {\n        forwardedRef.current = node;\n      }\n    },\n    [forwardedRef],\n  );\n\n  useEffect(() => {\n    if (!open || !rootElement) {\n      return;\n    }\n\n    const unregister = registerOverlay(\n      rootElement.ownerDocument,\n      () => {\n        if (closeOnEscape) {\n          onClose?.();\n        }\n      },\n      parentPriority,\n      {\n        modal,\n        getContent: () =>\n          rootRef.current?.querySelector<HTMLElement>(\n            \"[data-overlay-content]\",\n          ) ?? rootRef.current,\n        getLayer: () => rootRef.current,\n      },\n    );\n\n    registrationRef.current = unregister;\n\n    return () => {\n      unregister();\n\n      if (registrationRef.current === unregister) {\n        registrationRef.current = null;\n      }\n    };\n  }, [open, rootElement, modal, closeOnEscape, onClose, parentPriority]);\n\n  return (\n    <OverlayStackProvider priority={parentPriority + 1}>\n      <ScrollLock enabled={open && modal} />\n\n      <Transition visible={open} template=\"fade\">\n        <Component\n          {...componentProps}\n          ref={setRootRef as never}\n          className={classes}\n          onClick={(event) => {\n            onClick?.(event);\n\n            if (\n              event.defaultPrevented ||\n              !closeOnBackdrop ||\n              event.target !== event.currentTarget ||\n              !registrationRef.current?.isTop()\n            ) {\n              return;\n            }\n\n            event.stopPropagation();\n            onClose?.();\n          }}\n        >\n          {children}\n        </Component>\n      </Transition>\n    </OverlayStackProvider>\n  );\n};\n\nexport { Backdrop, type BackdropProps };\n"],"mappings":";;;;;;;;;AAsCA,MAAM,YAA2C,EAC/C,IACA,OAAO,MACP,QAAQ,OACR,kBAAkB,MAClB,gBAAgB,MAChB,SACA,WACA,UACA,SACA,GAAG,YACmB;CACtB,MAAM,YAAY,MAAM;CAExB,MAAM,UAAU,OAA2B,IAAI;CAC/C,MAAM,kBAAkB,OAAmC,IAAI;CAI/D,MAAM,CAAC,aAAa,kBAAkB,SAA6B,IAAI;CAEvE,MAAM,iBAAiB,mBAAmB;CAC1C,MAAM,UAAU,GAAG,mBAAmB,SAAS;CAE/C,MAAM,eAAgB,MAAqC;CAC3D,MAAM,iBAAiB,EAAE,GAAG,MAAM;CAElC,OAAQ,eAA8C;CAEtD,MAAM,aAAa,aAChB,SAA6B;EAC5B,QAAQ,UAAU;EAClB,eAAe,IAAI;EAEnB,IAAI,OAAO,iBAAiB,YAC1B,aAAa,IAAI;OACZ,IAAI,cACT,aAAa,UAAU;CAE3B,GACA,CAAC,YAAY,CACf;CAEA,gBAAgB;EACd,IAAI,CAAC,QAAQ,CAAC,aACZ;EAGF,MAAM,aAAa,gBACjB,YAAY,qBACN;GACJ,IAAI,eACF,UAAU;EAEd,GACA,gBACA;GACE;GACA,kBACE,QAAQ,SAAS,cACf,wBACF,KAAK,QAAQ;GACf,gBAAgB,QAAQ;EAC1B,CACF;EAEA,gBAAgB,UAAU;EAE1B,aAAa;GACX,WAAW;GAEX,IAAI,gBAAgB,YAAY,YAC9B,gBAAgB,UAAU;EAE9B;CACF,GAAG;EAAC;EAAM;EAAa;EAAO;EAAe;EAAS;CAAc,CAAC;CAErE,OACE,qBAAC,sBAAD;EAAsB,UAAU,iBAAiB;EAAjD,UAAA,CACE,oBAAC,YAAD,EAAY,SAAS,QAAQ,MAAQ,CAAA,GAErC,oBAAC,YAAD;GAAY,SAAS;GAAM,UAAS;GAClC,UAAA,oBAAC,WAAD;IACE,GAAI;IACJ,KAAK;IACL,WAAW;IACX,UAAU,UAAU;KAClB,UAAU,KAAK;KAEf,IACE,MAAM,oBACN,CAAC,mBACD,MAAM,WAAW,MAAM,iBACvB,CAAC,gBAAgB,SAAS,MAAM,GAEhC;KAGF,MAAM,gBAAgB;KACtB,UAAU;IACZ;IAEC;GACQ,CAAA;EACD,CAAA,CACQ;;AAE1B"}

package/dist/components/overlays/command/command.css

@@ -0,0 +1,154 @@
+.puzzle-command {
+  min-width: 0;
+  color: var(--puzzle-color-text, inherit);
+  background: var(--puzzle-color-surface, #fff);
+  font-family: var(--puzzle-font-family-body, inherit);
+  font-size: var(--puzzle-font-size-sm, .875rem);
+  flex-direction: column;
+  display: flex;
+  overflow: hidden;
+}
+
+.puzzle-command__search {
+  align-items: center;
+  gap: var(--puzzle-space-3, .75rem);
+  padding: var(--puzzle-space-4, 1rem);
+  border-bottom: 1px solid var(--puzzle-color-border, #e5e0d6);
+  display: flex;
+}
+
+.puzzle-command__search-icon {
+  color: var(--puzzle-color-text-muted, #737373);
+  flex-shrink: 0;
+}
+
+.puzzle-command__input {
+  min-width: 0;
+  color: inherit;
+  font: inherit;
+  background: none;
+  border: 0;
+  outline: 0;
+  flex: 1;
+  padding: 0;
+}
+
+.puzzle-command__input::placeholder {
+  color: var(--puzzle-color-text-muted, #737373);
+}
+
+.puzzle-command__input:focus-visible {
+  outline: none;
+}
+
+.puzzle-command__list {
+  overscroll-behavior: contain;
+  max-height: min(24rem, 60vh);
+  padding: var(--puzzle-space-2, .5rem);
+  overflow-y: auto;
+}
+
+.puzzle-command__group + .puzzle-command__group {
+  margin-top: var(--puzzle-space-2, .5rem);
+  padding-top: var(--puzzle-space-2, .5rem);
+  border-top: 1px solid var(--puzzle-color-border, #e5e0d6);
+}
+
+.puzzle-command__group-heading {
+  padding: var(--puzzle-space-2, .5rem);
+  color: var(--puzzle-color-text-muted, #737373);
+  font-size: var(--puzzle-font-size-xs, .75rem);
+  font-weight: var(--puzzle-font-weight-semibold, 600);
+}
+
+.puzzle-command__item {
+  align-items: center;
+  gap: var(--puzzle-space-3, .75rem);
+  min-width: 0;
+  padding: var(--puzzle-space-2, .5rem) var(--puzzle-space-3, .75rem);
+  border-radius: var(--puzzle-radius-md, .5rem);
+  cursor: pointer;
+  user-select: none;
+  display: flex;
+}
+
+.puzzle-command__item--active {
+  color: var(--puzzle-color-primary-foreground, #fff);
+  background: var(--puzzle-color-primary, #2563eb);
+}
+
+.puzzle-command__item--disabled {
+  opacity: .5;
+  cursor: not-allowed;
+}
+
+.puzzle-command__item-icon {
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  display: inline-flex;
+}
+
+.puzzle-command__item-content {
+  gap: var(--puzzle-space-1, .25rem);
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  display: flex;
+}
+
+.puzzle-command__item-label {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.puzzle-command__item-description {
+  color: var(--puzzle-color-text-muted, #737373);
+  font-size: var(--puzzle-font-size-xs, .75rem);
+}
+
+.puzzle-command__item--active .puzzle-command__item-description {
+  color: inherit;
+  opacity: .8;
+}
+
+.puzzle-command__shortcut {
+  color: var(--puzzle-color-text-muted, #737373);
+  font-size: var(--puzzle-font-size-xs, .75rem);
+  flex-shrink: 0;
+}
+
+.puzzle-command__item--active .puzzle-command__shortcut {
+  color: inherit;
+}
+
+.puzzle-command__empty {
+  padding: var(--puzzle-space-6, 1.5rem);
+  color: var(--puzzle-color-text-muted, #737373);
+  text-align: center;
+}
+
+.puzzle-command__sr-only {
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  position: absolute;
+  overflow: hidden;
+}
+
+.puzzle-command-dialog .puzzle-dialog__body {
+  padding: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .puzzle-command * {
+    scroll-behavior: auto;
+    transition: none;
+    animation: none;
+  }
+}

package/dist/components/overlays/command/command.types.d.cts

@@ -0,0 +1,36 @@
+import { HTMLAttributes, ReactNode } from "react";
+type CommandItem = {
+  id: string;
+  label: string;
+  description?: string;
+  keywords?: string[];
+  group?: string;
+  shortcut?: string;
+  icon?: ReactNode;
+  disabled?: boolean;
+  onSelect?: () => void;
+};
+type CommandProps = Omit<HTMLAttributes<HTMLDivElement>, "onSelect" | "children"> & {
+  commands: CommandItem[];
+  placeholder?: string;
+  label?: string;
+  emptyMessage?: ReactNode;
+  loading?: boolean;
+  loadingMessage?: ReactNode;
+  filter?: (command: CommandItem, query: string) => boolean;
+  onSelect?: (command: CommandItem) => void;
+  onQueryChange?: (query: string) => void;
+  query?: string;
+  defaultQuery?: string;
+  loop?: boolean;
+  autoFocus?: boolean;
+};
+type CommandDialogProps = Omit<CommandProps, "autoFocus"> & {
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  title?: ReactNode;
+  description?: string;
+  shortcut?: string | false;
+};
+export type { CommandDialogProps, CommandItem, CommandProps };

package/dist/components/overlays/command/command.types.d.ts

@@ -0,0 +1,36 @@
+import { HTMLAttributes, ReactNode } from "react";
+type CommandItem = {
+  id: string;
+  label: string;
+  description?: string;
+  keywords?: string[];
+  group?: string;
+  shortcut?: string;
+  icon?: ReactNode;
+  disabled?: boolean;
+  onSelect?: () => void;
+};
+type CommandProps = Omit<HTMLAttributes<HTMLDivElement>, "onSelect" | "children"> & {
+  commands: CommandItem[];
+  placeholder?: string;
+  label?: string;
+  emptyMessage?: ReactNode;
+  loading?: boolean;
+  loadingMessage?: ReactNode;
+  filter?: (command: CommandItem, query: string) => boolean;
+  onSelect?: (command: CommandItem) => void;
+  onQueryChange?: (query: string) => void;
+  query?: string;
+  defaultQuery?: string;
+  loop?: boolean;
+  autoFocus?: boolean;
+};
+type CommandDialogProps = Omit<CommandProps, "autoFocus"> & {
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  title?: ReactNode;
+  description?: string;
+  shortcut?: string | false;
+};
+export type { CommandDialogProps, CommandItem, CommandProps };