@puzzle-ui/ui 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,273 @@
+"use client";
+import { Dialog } from "../dialog/index.js";
+import { filterCommands, findFirstEnabledIndex, findLastEnabledIndex, getNextEnabledIndex } from "./command.utils.js";
+import "./command.css";
+import { cn } from "@puzzle-ui/core";
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/overlays/command/index.tsx
+const Command = ({ commands, placeholder = "Search commands...", label = "Search commands", emptyMessage = "No commands found.", loading = false, loadingMessage = "Searching...", filter, onSelect, onQueryChange, query, defaultQuery = "", loop = true, autoFocus = true, className, ...props }) => {
+	const baseId = useId();
+	const inputId = `${baseId}-input`;
+	const listId = `${baseId}-list`;
+	const statusId = `${baseId}-status`;
+	const inputRef = useRef(null);
+	const controlledQuery = query !== void 0;
+	const [internalQuery, setInternalQuery] = useState(defaultQuery);
+	const [activeIndex, setActiveIndex] = useState(-1);
+	const currentQuery = controlledQuery ? query : internalQuery;
+	const filteredCommands = useMemo(() => filter ? commands.filter((command) => filter(command, currentQuery)) : filterCommands(commands, currentQuery), [
+		commands,
+		currentQuery,
+		filter
+	]);
+	const enabledCommands = useMemo(() => filteredCommands.filter((command) => !command.disabled), [filteredCommands]);
+	const groupedCommands = useMemo(() => {
+		const groups = /* @__PURE__ */ new Map();
+		filteredCommands.forEach((command) => {
+			const group = command.group ?? "";
+			const items = groups.get(group) ?? [];
+			items.push(command);
+			groups.set(group, items);
+		});
+		return Array.from(groups.entries());
+	}, [filteredCommands]);
+	const activeCommand = filteredCommands[activeIndex];
+	const changeQuery = useCallback((nextQuery) => {
+		if (!controlledQuery) setInternalQuery(nextQuery);
+		setActiveIndex(-1);
+		onQueryChange?.(nextQuery);
+	}, [controlledQuery, onQueryChange]);
+	const selectCommand = useCallback((command) => {
+		if (command.disabled) return;
+		command.onSelect?.();
+		onSelect?.(command);
+	}, [onSelect]);
+	const handleInputChange = (event) => {
+		changeQuery(event.currentTarget.value);
+	};
+	const handleKeyDown = (event) => {
+		switch (event.key) {
+			case "ArrowDown":
+				event.preventDefault();
+				setActiveIndex((current) => getNextEnabledIndex(filteredCommands, current, 1, loop));
+				break;
+			case "ArrowUp":
+				event.preventDefault();
+				setActiveIndex((current) => getNextEnabledIndex(filteredCommands, current < 0 ? filteredCommands.length : current, -1, loop));
+				break;
+			case "Home":
+				if (event.ctrlKey || event.metaKey) {
+					event.preventDefault();
+					setActiveIndex(findFirstEnabledIndex(filteredCommands));
+				}
+				break;
+			case "End":
+				if (event.ctrlKey || event.metaKey) {
+					event.preventDefault();
+					setActiveIndex(findLastEnabledIndex(filteredCommands));
+				}
+				break;
+			case "Enter":
+				event.preventDefault();
+				if (activeCommand && !activeCommand.disabled) selectCommand(activeCommand);
+		}
+	};
+	useEffect(() => {
+		if (!autoFocus) return;
+		inputRef.current?.focus({ preventScroll: true });
+	}, [autoFocus]);
+	useEffect(() => {
+		if (activeIndex >= filteredCommands.length || filteredCommands[activeIndex]?.disabled) setActiveIndex(findFirstEnabledIndex(filteredCommands));
+	}, [activeIndex, filteredCommands]);
+	return /* @__PURE__ */ jsxs("div", {
+		...props,
+		className: cn("puzzle-command", className),
+		"data-command": "",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "puzzle-command__search",
+				children: [/* @__PURE__ */ jsxs("svg", {
+					className: "puzzle-command__search-icon",
+					viewBox: "0 0 24 24",
+					width: "18",
+					height: "18",
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth: "2",
+					strokeLinecap: "round",
+					"aria-hidden": "true",
+					children: [/* @__PURE__ */ jsx("circle", {
+						cx: "11",
+						cy: "11",
+						r: "8"
+					}), /* @__PURE__ */ jsx("path", { d: "m21 21-4.35-4.35" })]
+				}), /* @__PURE__ */ jsx("input", {
+					ref: inputRef,
+					id: inputId,
+					className: "puzzle-command__input",
+					type: "text",
+					role: "combobox",
+					"aria-label": label,
+					"aria-autocomplete": "list",
+					"aria-expanded": true,
+					"aria-controls": listId,
+					"aria-activedescendant": activeCommand ? `${baseId}-item-${encodeURIComponent(activeCommand.id)}` : void 0,
+					"aria-describedby": statusId,
+					placeholder,
+					value: currentQuery,
+					onChange: handleInputChange,
+					onKeyDown: handleKeyDown,
+					autoComplete: "off",
+					spellCheck: false
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				id: listId,
+				className: "puzzle-command__list",
+				role: "listbox",
+				"aria-label": "Commands",
+				"aria-busy": loading,
+				children: loading ? /* @__PURE__ */ jsx("div", {
+					className: "puzzle-command__empty",
+					role: "status",
+					children: loadingMessage
+				}) : filteredCommands.length === 0 ? /* @__PURE__ */ jsx("div", {
+					className: "puzzle-command__empty",
+					role: "status",
+					children: emptyMessage
+				}) : groupedCommands.map(([group, items]) => {
+					const groupId = group ? `${baseId}-group-${encodeURIComponent(group)}` : void 0;
+					return /* @__PURE__ */ jsxs("div", {
+						className: "puzzle-command__group",
+						role: "group",
+						"aria-labelledby": groupId,
+						children: [group && /* @__PURE__ */ jsx("div", {
+							id: groupId,
+							className: "puzzle-command__group-heading",
+							children: group
+						}), items.map((command) => {
+							const index = filteredCommands.indexOf(command);
+							const selected = index === activeIndex;
+							return /* @__PURE__ */ jsxs("div", {
+								id: `${baseId}-item-${encodeURIComponent(command.id)}`,
+								className: cn("puzzle-command__item", selected && "puzzle-command__item--active", command.disabled && "puzzle-command__item--disabled"),
+								role: "option",
+								"aria-selected": selected,
+								"aria-disabled": command.disabled || void 0,
+								"data-active": selected || void 0,
+								onMouseEnter: () => {
+									if (!command.disabled) setActiveIndex(index);
+								},
+								onMouseDown: (event) => {
+									event.preventDefault();
+								},
+								onClick: () => {
+									selectCommand(command);
+								},
+								children: [
+									command.icon && /* @__PURE__ */ jsx("span", {
+										className: "puzzle-command__item-icon",
+										"aria-hidden": "true",
+										children: command.icon
+									}),
+									/* @__PURE__ */ jsxs("span", {
+										className: "puzzle-command__item-content",
+										children: [/* @__PURE__ */ jsx("span", {
+											className: "puzzle-command__item-label",
+											children: command.label
+										}), command.description && /* @__PURE__ */ jsx("span", {
+											className: "puzzle-command__item-description",
+											children: command.description
+										})]
+									}),
+									command.shortcut && /* @__PURE__ */ jsx("span", {
+										className: "puzzle-command__shortcut",
+										children: command.shortcut
+									})
+								]
+							}, command.id);
+						})]
+					}, group || "__default");
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				id: statusId,
+				className: "puzzle-command__sr-only",
+				role: "status",
+				"aria-live": "polite",
+				"aria-atomic": "true",
+				children: loading ? loadingMessage : enabledCommands.length === 0 ? emptyMessage : `${enabledCommands.length} ${enabledCommands.length === 1 ? "command" : "commands"} available`
+			})
+		]
+	});
+};
+const CommandDialog = ({ open, defaultOpen = false, onOpenChange, title = "Command palette", description, shortcut = "k", commands, onSelect, ...commandProps }) => {
+	const controlled = open !== void 0;
+	const [internalOpen, setInternalOpen] = useState(defaultOpen);
+	const isOpen = controlled ? open : internalOpen;
+	const [ownerDocument, setOwnerDocument] = useState(null);
+	const rootRef = useCallback((node) => {
+		setOwnerDocument(node?.ownerDocument ?? null);
+	}, []);
+	const changeOpen = useCallback((nextOpen) => {
+		if (!controlled) setInternalOpen(nextOpen);
+		onOpenChange?.(nextOpen);
+	}, [controlled, onOpenChange]);
+	useEffect(() => {
+		if (shortcut === false || !ownerDocument) return;
+		const view = ownerDocument.defaultView;
+		if (!view) return;
+		const handleGlobalKeyDown = (event) => {
+			if (!(event instanceof view.KeyboardEvent)) return;
+			const keyboardEvent = event;
+			if (keyboardEvent.defaultPrevented || keyboardEvent.isComposing || keyboardEvent.key.toLowerCase() !== shortcut.toLowerCase() || !(keyboardEvent.metaKey || keyboardEvent.ctrlKey) || keyboardEvent.shiftKey || keyboardEvent.altKey) return;
+			const target = keyboardEvent.target;
+			if (target instanceof view.HTMLElement) {
+				if (target.isContentEditable || target.closest([
+					"input",
+					"textarea",
+					"select",
+					"[contenteditable=\"true\"]",
+					"[role=\"textbox\"]"
+				].join(", ")) !== null) return;
+			}
+			keyboardEvent.preventDefault();
+			changeOpen(!isOpen);
+		};
+		ownerDocument.addEventListener("keydown", handleGlobalKeyDown);
+		return () => {
+			ownerDocument.removeEventListener("keydown", handleGlobalKeyDown);
+		};
+	}, [
+		ownerDocument,
+		shortcut,
+		isOpen,
+		changeOpen
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		ref: rootRef,
+		"data-command-dialog-root": "",
+		children: /* @__PURE__ */ jsx(Dialog, {
+			open: isOpen,
+			onOpenChange: changeOpen,
+			title,
+			description,
+			size: "md",
+			closeButton: false,
+			className: "puzzle-command-dialog",
+			children: /* @__PURE__ */ jsx(Command, {
+				...commandProps,
+				commands,
+				autoFocus: isOpen,
+				onSelect: (command) => {
+					onSelect?.(command);
+					changeOpen(false);
+				}
+			})
+		})
+	});
+};
+export { Command, CommandDialog };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/overlays/command/index.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n  type ChangeEvent,\n  type KeyboardEvent as ReactKeyboardEvent,\n} from \"react\";\n\nimport { cn } from \"@puzzle-ui/core\";\n\nimport { Dialog } from \"../dialog\";\n\nimport {\n  filterCommands,\n  findFirstEnabledIndex,\n  findLastEnabledIndex,\n  getNextEnabledIndex,\n} from \"./command.utils\";\n\nimport type {\n  CommandDialogProps,\n  CommandItem,\n  CommandProps,\n} from \"./command.types\";\n\nimport \"./command.css\";\n\nconst Command = ({\n  commands,\n  placeholder = \"Search commands...\",\n  label = \"Search commands\",\n  emptyMessage = \"No commands found.\",\n  loading = false,\n  loadingMessage = \"Searching...\",\n  filter,\n  onSelect,\n  onQueryChange,\n  query,\n  defaultQuery = \"\",\n  loop = true,\n  autoFocus = true,\n  className,\n  ...props\n}: CommandProps) => {\n  const baseId = useId();\n  const inputId = `${baseId}-input`;\n  const listId = `${baseId}-list`;\n  const statusId = `${baseId}-status`;\n\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const controlledQuery = query !== undefined;\n\n  const [internalQuery, setInternalQuery] = useState(defaultQuery);\n\n  const [activeIndex, setActiveIndex] = useState(-1);\n\n  const currentQuery = controlledQuery ? query : internalQuery;\n\n  const filteredCommands = useMemo(\n    () =>\n      filter\n        ? commands.filter((command) => filter(command, currentQuery))\n        : filterCommands(commands, currentQuery),\n    [commands, currentQuery, filter],\n  );\n\n  const enabledCommands = useMemo(\n    () => filteredCommands.filter((command) => !command.disabled),\n    [filteredCommands],\n  );\n\n  const groupedCommands = useMemo(() => {\n    const groups = new Map<string, CommandItem[]>();\n\n    filteredCommands.forEach((command) => {\n      const group = command.group ?? \"\";\n      const items = groups.get(group) ?? [];\n\n      items.push(command);\n      groups.set(group, items);\n    });\n\n    return Array.from(groups.entries());\n  }, [filteredCommands]);\n\n  const activeCommand = filteredCommands[activeIndex];\n\n  const changeQuery = useCallback(\n    (nextQuery: string) => {\n      if (!controlledQuery) {\n        setInternalQuery(nextQuery);\n      }\n\n      setActiveIndex(-1);\n      onQueryChange?.(nextQuery);\n    },\n    [controlledQuery, onQueryChange],\n  );\n\n  const selectCommand = useCallback(\n    (command: CommandItem) => {\n      if (command.disabled) {\n        return;\n      }\n\n      command.onSelect?.();\n      onSelect?.(command);\n    },\n    [onSelect],\n  );\n\n  const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {\n    changeQuery(event.currentTarget.value);\n  };\n\n  const handleKeyDown = (event: ReactKeyboardEvent<HTMLInputElement>) => {\n    switch (event.key) {\n      case \"ArrowDown\": {\n        event.preventDefault();\n\n        setActiveIndex((current) =>\n          getNextEnabledIndex(filteredCommands, current, 1, loop),\n        );\n\n        break;\n      }\n\n      case \"ArrowUp\": {\n        event.preventDefault();\n\n        setActiveIndex((current) =>\n          getNextEnabledIndex(\n            filteredCommands,\n            current < 0 ? filteredCommands.length : current,\n            -1,\n            loop,\n          ),\n        );\n\n        break;\n      }\n\n      case \"Home\": {\n        if (event.ctrlKey || event.metaKey) {\n          event.preventDefault();\n\n          setActiveIndex(findFirstEnabledIndex(filteredCommands));\n        }\n\n        break;\n      }\n\n      case \"End\": {\n        if (event.ctrlKey || event.metaKey) {\n          event.preventDefault();\n\n          setActiveIndex(findLastEnabledIndex(filteredCommands));\n        }\n\n        break;\n      }\n\n      case \"Enter\": {\n        event.preventDefault();\n\n        if (activeCommand && !activeCommand.disabled) {\n          selectCommand(activeCommand);\n        }\n\n        break;\n      }\n    }\n  };\n\n  useEffect(() => {\n    if (!autoFocus) {\n      return;\n    }\n\n    inputRef.current?.focus({\n      preventScroll: true,\n    });\n  }, [autoFocus]);\n\n  useEffect(() => {\n    if (\n      activeIndex >= filteredCommands.length ||\n      filteredCommands[activeIndex]?.disabled\n    ) {\n      setActiveIndex(findFirstEnabledIndex(filteredCommands));\n    }\n  }, [activeIndex, filteredCommands]);\n\n  return (\n    <div {...props} className={cn(\"puzzle-command\", className)} data-command=\"\">\n      <div className=\"puzzle-command__search\">\n        <svg\n          className=\"puzzle-command__search-icon\"\n          viewBox=\"0 0 24 24\"\n          width=\"18\"\n          height=\"18\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n          aria-hidden=\"true\"\n        >\n          <circle cx=\"11\" cy=\"11\" r=\"8\" />\n          <path d=\"m21 21-4.35-4.35\" />\n        </svg>\n\n        <input\n          ref={inputRef}\n          id={inputId}\n          className=\"puzzle-command__input\"\n          type=\"text\"\n          role=\"combobox\"\n          aria-label={label}\n          aria-autocomplete=\"list\"\n          aria-expanded={true}\n          aria-controls={listId}\n          aria-activedescendant={\n            activeCommand\n              ? `${baseId}-item-${encodeURIComponent(activeCommand.id)}`\n              : undefined\n          }\n          aria-describedby={statusId}\n          placeholder={placeholder}\n          value={currentQuery}\n          onChange={handleInputChange}\n          onKeyDown={handleKeyDown}\n          autoComplete=\"off\"\n          spellCheck={false}\n        />\n      </div>\n\n      <div\n        id={listId}\n        className=\"puzzle-command__list\"\n        role=\"listbox\"\n        aria-label=\"Commands\"\n        aria-busy={loading}\n      >\n        {loading ? (\n          <div className=\"puzzle-command__empty\" role=\"status\">\n            {loadingMessage}\n          </div>\n        ) : filteredCommands.length === 0 ? (\n          <div className=\"puzzle-command__empty\" role=\"status\">\n            {emptyMessage}\n          </div>\n        ) : (\n          groupedCommands.map(([group, items]) => {\n            const groupId = group\n              ? `${baseId}-group-${encodeURIComponent(group)}`\n              : undefined;\n\n            return (\n              <div\n                key={group || \"__default\"}\n                className=\"puzzle-command__group\"\n                role=\"group\"\n                aria-labelledby={groupId}\n              >\n                {group && (\n                  <div id={groupId} className=\"puzzle-command__group-heading\">\n                    {group}\n                  </div>\n                )}\n\n                {items.map((command) => {\n                  const index = filteredCommands.indexOf(command);\n\n                  const selected = index === activeIndex;\n\n                  return (\n                    <div\n                      key={command.id}\n                      id={`${baseId}-item-${encodeURIComponent(command.id)}`}\n                      className={cn(\n                        \"puzzle-command__item\",\n                        selected && \"puzzle-command__item--active\",\n                        command.disabled && \"puzzle-command__item--disabled\",\n                      )}\n                      role=\"option\"\n                      aria-selected={selected}\n                      aria-disabled={command.disabled || undefined}\n                      data-active={selected || undefined}\n                      onMouseEnter={() => {\n                        if (!command.disabled) {\n                          setActiveIndex(index);\n                        }\n                      }}\n                      onMouseDown={(event) => {\n                        event.preventDefault();\n                      }}\n                      onClick={() => {\n                        selectCommand(command);\n                      }}\n                    >\n                      {command.icon && (\n                        <span\n                          className=\"puzzle-command__item-icon\"\n                          aria-hidden=\"true\"\n                        >\n                          {command.icon}\n                        </span>\n                      )}\n\n                      <span className=\"puzzle-command__item-content\">\n                        <span className=\"puzzle-command__item-label\">\n                          {command.label}\n                        </span>\n\n                        {command.description && (\n                          <span className=\"puzzle-command__item-description\">\n                            {command.description}\n                          </span>\n                        )}\n                      </span>\n\n                      {command.shortcut && (\n                        <span className=\"puzzle-command__shortcut\">\n                          {command.shortcut}\n                        </span>\n                      )}\n                    </div>\n                  );\n                })}\n              </div>\n            );\n          })\n        )}\n      </div>\n\n      <div\n        id={statusId}\n        className=\"puzzle-command__sr-only\"\n        role=\"status\"\n        aria-live=\"polite\"\n        aria-atomic=\"true\"\n      >\n        {loading\n          ? loadingMessage\n          : enabledCommands.length === 0\n            ? emptyMessage\n            : `${enabledCommands.length} ${\n                enabledCommands.length === 1 ? \"command\" : \"commands\"\n              } available`}\n      </div>\n    </div>\n  );\n};\n\nconst CommandDialog = ({\n  open,\n  defaultOpen = false,\n  onOpenChange,\n  title = \"Command palette\",\n  description,\n  shortcut = \"k\",\n  commands,\n  onSelect,\n  ...commandProps\n}: CommandDialogProps) => {\n  const controlled = open !== undefined;\n\n  const [internalOpen, setInternalOpen] = useState(defaultOpen);\n\n  const isOpen = controlled ? open : internalOpen;\n\n  const [ownerDocument, setOwnerDocument] = useState<Document | null>(null);\n\n  const rootRef = useCallback((node: HTMLDivElement | null) => {\n    setOwnerDocument(node?.ownerDocument ?? null);\n  }, []);\n\n  const changeOpen = useCallback(\n    (nextOpen: boolean) => {\n      if (!controlled) {\n        setInternalOpen(nextOpen);\n      }\n\n      onOpenChange?.(nextOpen);\n    },\n    [controlled, onOpenChange],\n  );\n\n  useEffect(() => {\n    if (shortcut === false || !ownerDocument) {\n      return;\n    }\n\n    const view = ownerDocument.defaultView;\n\n    if (!view) {\n      return;\n    }\n\n    const handleGlobalKeyDown: EventListener = (event) => {\n      if (!(event instanceof view.KeyboardEvent)) {\n        return;\n      }\n\n      const keyboardEvent = event;\n\n      if (\n        keyboardEvent.defaultPrevented ||\n        keyboardEvent.isComposing ||\n        keyboardEvent.key.toLowerCase() !== shortcut.toLowerCase() ||\n        !(keyboardEvent.metaKey || keyboardEvent.ctrlKey) ||\n        keyboardEvent.shiftKey ||\n        keyboardEvent.altKey\n      ) {\n        return;\n      }\n\n      const target = keyboardEvent.target;\n\n      if (target instanceof view.HTMLElement) {\n        const isEditable =\n          target.isContentEditable ||\n          target.closest(\n            [\n              \"input\",\n              \"textarea\",\n              \"select\",\n              '[contenteditable=\"true\"]',\n              '[role=\"textbox\"]',\n            ].join(\", \"),\n          ) !== null;\n\n        if (isEditable) {\n          return;\n        }\n      }\n\n      keyboardEvent.preventDefault();\n      changeOpen(!isOpen);\n    };\n\n    ownerDocument.addEventListener(\"keydown\", handleGlobalKeyDown);\n\n    return () => {\n      ownerDocument.removeEventListener(\"keydown\", handleGlobalKeyDown);\n    };\n  }, [ownerDocument, shortcut, isOpen, changeOpen]);\n\n  return (\n    <div ref={rootRef} data-command-dialog-root=\"\">\n      <Dialog\n        open={isOpen}\n        onOpenChange={changeOpen}\n        title={title}\n        description={description}\n        size=\"md\"\n        closeButton={false}\n        className=\"puzzle-command-dialog\"\n      >\n        <Command\n          {...commandProps}\n          commands={commands}\n          autoFocus={isOpen}\n          onSelect={(command) => {\n            onSelect?.(command);\n            changeOpen(false);\n          }}\n        />\n      </Dialog>\n    </div>\n  );\n};\n\nexport {\n  Command,\n  CommandDialog,\n  type CommandItem,\n  type CommandProps,\n  type CommandDialogProps,\n};\n"],"mappings":"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"}

package/dist/components/overlays/dialog/dialog.css

@@ -0,0 +1,121 @@
+.puzzle-dialog {
+  --puzzle-dialog-width: 40rem;
+  box-sizing: border-box;
+  width: min(var(--puzzle-dialog-width), calc(100vw - 2rem));
+  border: var(--puzzle-border-width, 1px) solid var(--puzzle-color-border, #e5e0d6);
+  border-radius: var(--puzzle-radius-lg, 1rem);
+  max-width: calc(100vw - 2rem);
+  max-height: min(85dvh, 48rem);
+  color: var(--puzzle-color-text, #171717);
+  background: var(--puzzle-color-surface, #fff);
+  box-shadow: var(--puzzle-elevation-16, 0 45px 80px -20px #00000040);
+  font: inherit;
+  flex-direction: column;
+  margin: auto;
+  padding: 0;
+  display: flex;
+  overflow: hidden;
+}
+
+.puzzle-dialog--sm {
+  --puzzle-dialog-width: 24rem;
+}
+
+.puzzle-dialog--md {
+  --puzzle-dialog-width: 40rem;
+}
+
+.puzzle-dialog--lg {
+  --puzzle-dialog-width: 56rem;
+}
+
+.puzzle-dialog--xl {
+  --puzzle-dialog-width: 72rem;
+}
+
+.puzzle-dialog--full {
+  --puzzle-dialog-width: calc(100vw - 2rem);
+  max-height: calc(100dvh - 2rem);
+}
+
+.puzzle-dialog__header {
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: var(--puzzle-space-4, 1rem);
+  padding: var(--puzzle-space-6, 1.5rem);
+  padding-bottom: 0;
+  display: flex;
+}
+
+.puzzle-dialog__heading {
+  min-width: 0;
+}
+
+.puzzle-dialog__title {
+  font-family: var(--puzzle-font-family-headline4, inherit);
+  font-size: var(--puzzle-font-size-headline4, 1.25rem);
+  line-height: var(--puzzle-font-line-height-headline4, 1.3);
+  font-weight: var(--puzzle-font-weight-headline4, 600);
+  overflow-wrap: anywhere;
+  margin: 0;
+}
+
+.puzzle-dialog__description {
+  margin: var(--puzzle-space-2, .5rem) 0 0;
+  color: var(--puzzle-color-text-muted, #666);
+  line-height: var(--puzzle-font-line-height-body1, 1.5);
+}
+
+.puzzle-dialog__close {
+  border-radius: var(--puzzle-radius-md, .5rem);
+  width: 2.5rem;
+  height: 2.5rem;
+  color: inherit;
+  font: inherit;
+  font-size: 1.75rem;
+  line-height: var(--puzzle-font-line-height-none, 1);
+  cursor: pointer;
+  background: none;
+  border: 1px solid #0000;
+  flex: none;
+  justify-content: center;
+  align-items: center;
+  margin: -.25rem -.25rem 0 0;
+  padding: 0;
+  display: inline-flex;
+}
+
+.puzzle-dialog__close:hover {
+  background: var(--puzzle-color-surface-sunken, #f1eee6);
+}
+
+.puzzle-dialog__close:focus-visible {
+  outline: 2px solid var(--puzzle-color-ring, #2563eb);
+  outline-offset: 2px;
+}
+
+.puzzle-dialog__body {
+  min-height: 0;
+  padding: var(--puzzle-space-6, 1.5rem);
+  overscroll-behavior: contain;
+  flex: auto;
+  overflow: hidden auto;
+}
+
+.puzzle-dialog__footer {
+  justify-content: flex-end;
+  align-items: center;
+  gap: var(--puzzle-space-3, .75rem);
+  padding: var(--puzzle-space-4, 1rem) var(--puzzle-space-6, 1.5rem);
+  border-top: var(--puzzle-border-width, 1px) solid var(--puzzle-color-border, #e5e0d6);
+  flex-wrap: wrap;
+  flex: none;
+  display: flex;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .puzzle-dialog {
+    transition: none;
+    animation: none;
+  }
+}

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

@@ -0,0 +1,80 @@
+"use client";
+;/* empty css             */
+const require_index = require("../../utilities/transition/index.cjs");
+const require_index$1 = require("../backdrop/index.cjs");
+const require_index$2 = require("../portal/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/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 = (0, react.useId)();
+	const descriptionId = (0, react.useId)();
+	const handleClose = (0, react.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__ */ (0, react_jsx_runtime.jsx)(require_index$2.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$1.Backdrop, {
+		open,
+		modal: true,
+		closeOnBackdrop,
+		closeOnEscape,
+		onClose: handleClose,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.Transition, {
+			template: "slide-in-up",
+			visible: open,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				...props,
+				"data-overlay-content": "",
+				tabIndex: -1,
+				className: (0, _puzzle_ui_core.cn)("puzzle-dialog", `puzzle-dialog--${size}`, className),
+				role: "dialog",
+				"aria-modal": "true",
+				"aria-labelledby": titleId,
+				"aria-describedby": describedBy,
+				onClick: handleClick,
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("header", {
+						className: "puzzle-dialog__header",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "puzzle-dialog__heading",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+								id: titleId,
+								className: "puzzle-dialog__title",
+								children: title
+							}), description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								id: descriptionId,
+								className: "puzzle-dialog__description",
+								children: description
+							})]
+						}), closeButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							className: "puzzle-dialog__close",
+							"aria-label": closeLabel,
+							onClick: handleClose,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								"aria-hidden": "true",
+								children: "×"
+							})
+						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "puzzle-dialog__body",
+						children
+					}),
+					footer != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("footer", {
+						className: "puzzle-dialog__footer",
+						children: footer
+					})
+				]
+			})
+		})
+	}) });
+};
+exports.Dialog = Dialog;
+
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["useId","useCallback","Portal","Backdrop","Transition","cn"],"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,WAAA,GAAUA,MAAAA,MAAAA,CAAM;CACtB,MAAM,iBAAA,GAAgBA,MAAAA,MAAAA,CAAM;CAE5B,MAAM,eAAA,GAAcC,MAAAA,YAAAA,OAAkB;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,iBAAA,GAAA,kBAAA,IAAA,CAACC,gBAAAA,QAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,gBAAAA,UAAD;EACQ;EACN,OAAA;EACiB;EACF;EACf,SAAS;EAET,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,YAAD;GAAY,UAAS;GAAc,SAAS;GAC1C,UAAA,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;IACE,GAAI;IACJ,wBAAqB;IACrB,UAAU;IACV,YAAA,GAAWC,gBAAAA,GAAAA,CAAG,iBAAiB,kBAAkB,QAAQ,SAAS;IAClE,MAAK;IACL,cAAW;IACX,mBAAiB;IACjB,oBAAkB;IAClB,SAAS;IATX,UAAA;KAWE,iBAAA,GAAA,kBAAA,KAAA,CAAC,UAAD;MAAQ,WAAU;MAAlB,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;OAAK,WAAU;OAAf,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD;QAAI,IAAI;QAAS,WAAU;QACxB,UAAA;OACC,CAAA,GAEH,eACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,KAAD;QAAG,IAAI;QAAe,WAAU;QAC7B,UAAA;OACA,CAAA,CAEF;MAEJ,CAAA,GAAA,eACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;OACE,MAAK;OACL,WAAU;OACV,cAAY;OACZ,SAAS;OAET,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;QAAM,eAAY;QAAO,UAAA;OAAa,CAAA;MAChC,CAAA,CAEJ;;KAER,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;MAAK,WAAU;MAAuB;KAAc,CAAA;KAEnD,UAAU,QACT,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;MAAQ,WAAU;MAAyB,UAAA;KAAe,CAAA;IAEzD;;EACK,CAAA;CACJ,CAAA,EACJ,CAAA;AAEZ"}

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

@@ -0,0 +1,35 @@
+import { ComponentPropsWithoutRef, MouseEventHandler, ReactNode } from "react";
+type DialogSize = "sm" | "md" | "lg" | "xl" | "full";
+type NativeDialogProps = Omit<ComponentPropsWithoutRef<"div">, "open" | "children" | "onCancel" | "onClose" | "onClick" | "aria-labelledby" | "aria-describedby" | "aria-label" | "aria-modal" | "role" | "tabIndex">;
+type DialogProps = NativeDialogProps & {
+  /** Whether the dialog is open. */
+  open: boolean;
+  /** Called when the dialog requests a change in its open state. */
+  onOpenChange: (open: boolean) => void;
+  /** Required accessible heading for the dialog. */
+  title: ReactNode;
+  /** Short, optional description. */
+  description?: string;
+  /** Main dialog content. */
+  children?: ReactNode;
+  /** Optional footer. */
+  footer?: ReactNode;
+  /** Maximum dialog width preset. */
+  size?: DialogSize;
+  /** Whether to render a close button. */
+  closeButton?: boolean;
+  /** Accessible label for the close button. */
+  closeLabel?: string;
+  /** Whether clicking the backdrop requests closing. */
+  closeOnBackdrop?: boolean;
+  /** Whether pressing Escape requests closing. */
+  closeOnEscape?: boolean;
+  /** Optional native click handler. */
+  onClick?: MouseEventHandler<HTMLElement>;
+  /** Called when the dialog is closed. */
+  onClose?: () => void;
+  /** Additional IDs describing the dialog. */
+  "aria-describedby"?: string;
+};
+declare const Dialog: ({ open, onOpenChange, title, description, children, footer, size, closeButton, closeLabel, closeOnBackdrop, closeOnEscape, className, onClick, onClose, "aria-describedby": externalDescriptionId, ...props }: DialogProps) => import("react").JSX.Element;
+export { Dialog, type DialogProps };

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

@@ -0,0 +1,35 @@
+import { ComponentPropsWithoutRef, MouseEventHandler, ReactNode } from "react";
+type DialogSize = "sm" | "md" | "lg" | "xl" | "full";
+type NativeDialogProps = Omit<ComponentPropsWithoutRef<"div">, "open" | "children" | "onCancel" | "onClose" | "onClick" | "aria-labelledby" | "aria-describedby" | "aria-label" | "aria-modal" | "role" | "tabIndex">;
+type DialogProps = NativeDialogProps & {
+  /** Whether the dialog is open. */
+  open: boolean;
+  /** Called when the dialog requests a change in its open state. */
+  onOpenChange: (open: boolean) => void;
+  /** Required accessible heading for the dialog. */
+  title: ReactNode;
+  /** Short, optional description. */
+  description?: string;
+  /** Main dialog content. */
+  children?: ReactNode;
+  /** Optional footer. */
+  footer?: ReactNode;
+  /** Maximum dialog width preset. */
+  size?: DialogSize;
+  /** Whether to render a close button. */
+  closeButton?: boolean;
+  /** Accessible label for the close button. */
+  closeLabel?: string;
+  /** Whether clicking the backdrop requests closing. */
+  closeOnBackdrop?: boolean;
+  /** Whether pressing Escape requests closing. */
+  closeOnEscape?: boolean;
+  /** Optional native click handler. */
+  onClick?: MouseEventHandler<HTMLElement>;
+  /** Called when the dialog is closed. */
+  onClose?: () => void;
+  /** Additional IDs describing the dialog. */
+  "aria-describedby"?: string;
+};
+declare const Dialog: ({ open, onOpenChange, title, description, children, footer, size, closeButton, closeLabel, closeOnBackdrop, closeOnEscape, className, onClick, onClose, "aria-describedby": externalDescriptionId, ...props }: DialogProps) => import("react").JSX.Element;
+export { Dialog, type DialogProps };