@puzzle-ui/ui 0.0.0-stage → 0.2.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/overlays/popover/index.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  cloneElement,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type FocusEvent,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n  type RefAttributes,\n  type RefObject,\n} from \"react\";\nimport { cn } from \"@puzzle-ui/core\";\nimport { Popout, type PopoutAlignment, type PopoutPosition } from \"../popout\";\nimport \"./popover.css\";\n\ntype PopoverTriggerProps = HTMLAttributes<HTMLElement> &\n  RefAttributes<HTMLElement>;\n\n/**\n * Non-modal dialog anchored to a trigger, for interactive content such as\n * links, form controls or actions. Use Tooltip for non-interactive hints.\n */\ntype PopoverProps = {\n  trigger: ReactElement<PopoverTriggerProps>;\n  children: ReactNode;\n  /** Visible heading; also used as the dialog's accessible name. */\n  title?: ReactNode;\n  /** Accessible name when there is no visible title. */\n  \"aria-label\"?: string;\n  /** Renders a close button inside the popover. */\n  closable?: boolean;\n  closeLabel?: string;\n  position?: PopoutPosition;\n  align?: PopoutAlignment;\n  offset?: number;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  className?: string;\n  triggerClassName?: string;\n};\n\ntype PopoverContentProps = {\n  id: string;\n  title?: ReactNode;\n  ariaLabel?: string;\n  closable: boolean;\n  closeLabel: string;\n  skipAutoFocusRef: RefObject<boolean>;\n  dialogRef: RefObject<HTMLDivElement | null>;\n  anchorRef: RefObject<HTMLElement | null>;\n  onClose: () => void;\n  children: ReactNode;\n  className?: string;\n};\n\nconst FOCUSABLE_SELECTOR = [\n  \"a[href]\",\n  \"button:not([disabled])\",\n  \"input:not([disabled]):not([type='hidden'])\",\n  \"select:not([disabled])\",\n  \"textarea:not([disabled])\",\n  \"[tabindex]:not([tabindex='-1'])\",\n  \"[contenteditable='true']\",\n].join(\",\");\n\nconst getFocusable = (dialog: HTMLElement): HTMLElement[] =>\n  Array.from(dialog.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR));\n\n/** Returns whether focus actually landed inside the dialog. */\nconst focusFirst = (dialog: HTMLElement): boolean => {\n  const target = getFocusable(dialog)[0] ?? dialog;\n\n  target.focus({ preventScroll: true });\n\n  return dialog.contains(dialog.ownerDocument.activeElement);\n};\n\nconst setRef = <T,>(ref: Ref<T> | undefined, value: T | null): void => {\n  if (typeof ref === \"function\") {\n    ref(value);\n  } else if (ref) {\n    ref.current = value;\n  }\n};\n\nconst PopoverContent = ({\n  id,\n  title,\n  ariaLabel,\n  closable,\n  closeLabel,\n  skipAutoFocusRef,\n  dialogRef,\n  anchorRef,\n  onClose,\n  children,\n  className,\n}: PopoverContentProps) => {\n  const titleId = `${id}-title`;\n\n  // Popout keeps the surface `visibility: hidden` until it is positioned, and\n  // hidden elements cannot receive focus; retry once the surface is revealed.\n  useEffect(() => {\n    const dialog = dialogRef.current;\n\n    if (!dialog) return;\n\n    if (skipAutoFocusRef.current) {\n      skipAutoFocusRef.current = false;\n      return;\n    }\n\n    const surface = dialog.parentElement;\n\n    if (focusFirst(dialog) || !surface) return;\n\n    const MutationObserverConstructor =\n      dialog.ownerDocument.defaultView?.MutationObserver ?? MutationObserver;\n    const observer = new MutationObserverConstructor(() => {\n      if (surface.style.visibility !== \"hidden\") {\n        observer.disconnect();\n        focusFirst(dialog);\n      }\n    });\n\n    observer.observe(surface, { attributes: true, attributeFilter: [\"style\"] });\n\n    return () => observer.disconnect();\n  }, [dialogRef, skipAutoFocusRef]);\n\n  // Non-modal: moving focus outside both the popover and its trigger closes it.\n  const handleBlur = (event: FocusEvent<HTMLDivElement>) => {\n    const next = event.relatedTarget as Node | null;\n\n    if (\n      next &&\n      !event.currentTarget.contains(next) &&\n      !anchorRef.current?.contains(next)\n    ) {\n      onClose();\n    }\n  };\n\n  // The popover is portaled, so keep Tab order anchored to the trigger.\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (event.key !== \"Tab\") return;\n\n    const dialog = event.currentTarget;\n    const focusable = getFocusable(dialog);\n    const active = dialog.ownerDocument.activeElement;\n    const first = focusable[0] ?? dialog;\n    const last = focusable[focusable.length - 1] ?? dialog;\n\n    if (event.shiftKey && (active === first || active === dialog)) {\n      event.preventDefault();\n      anchorRef.current?.focus({ preventScroll: true });\n    } else if (!event.shiftKey && active === last) {\n      event.preventDefault();\n      onClose();\n      anchorRef.current?.focus({ preventScroll: true });\n    }\n  };\n\n  return (\n    <div\n      ref={dialogRef}\n      id={id}\n      role=\"dialog\"\n      aria-labelledby={title != null ? titleId : undefined}\n      aria-label={title == null ? ariaLabel : undefined}\n      tabIndex={-1}\n      className={cn(\"puzzle-popover\", className)}\n      onBlur={handleBlur}\n      onKeyDown={handleKeyDown}\n    >\n      {(title != null || closable) && (\n        <div className=\"puzzle-popover__header\">\n          {title != null && (\n            <div id={titleId} className=\"puzzle-popover__title\">\n              {title}\n            </div>\n          )}\n\n          {closable && (\n            <button\n              type=\"button\"\n              className=\"puzzle-popover__close\"\n              aria-label={closeLabel}\n              onClick={() => {\n                onClose();\n                anchorRef.current?.focus({ preventScroll: true });\n              }}\n            >\n              <span aria-hidden=\"true\">&times;</span>\n            </button>\n          )}\n        </div>\n      )}\n\n      <div className=\"puzzle-popover__body\">{children}</div>\n    </div>\n  );\n};\n\nconst Popover = ({\n  trigger,\n  children,\n  title,\n  \"aria-label\": ariaLabel,\n  closable = false,\n  closeLabel = \"Close\",\n  position = \"bottom\",\n  align = \"center\",\n  offset = 8,\n  open,\n  defaultOpen,\n  onOpenChange,\n  className,\n  triggerClassName,\n}: PopoverProps) => {\n  const popoverId = useId();\n  const anchorRef = useRef<HTMLElement | null>(null);\n  const dialogRef = useRef<HTMLDivElement | null>(null);\n  const [internalOpen, setInternalOpen] = useState(defaultOpen ?? false);\n  const isOpen = open ?? internalOpen;\n\n  // A popover that is already open on first render must not steal focus.\n  const skipAutoFocusRef = useRef(isOpen);\n\n  const handleOpenChange = useCallback(\n    (nextOpen: boolean) => {\n      if (open === undefined) {\n        setInternalOpen(nextOpen);\n      }\n\n      onOpenChange?.(nextOpen);\n    },\n    [open, onOpenChange],\n  );\n\n  const handleTriggerRef = useCallback(\n    (node: HTMLElement | null) => {\n      anchorRef.current = node;\n      setRef(trigger.props.ref, node);\n    },\n    [trigger],\n  );\n\n  // Tab from the trigger moves into the open popover instead of skipping it.\n  const handleTriggerKeyDown = (event: KeyboardEvent<HTMLElement>) => {\n    trigger.props.onKeyDown?.(event);\n\n    if (\n      event.defaultPrevented ||\n      event.key !== \"Tab\" ||\n      event.shiftKey ||\n      !isOpen ||\n      !dialogRef.current\n    ) {\n      return;\n    }\n\n    event.preventDefault();\n    focusFirst(dialogRef.current);\n  };\n\n  const triggerElement = cloneElement(trigger, {\n    ref: handleTriggerRef,\n    onKeyDown: handleTriggerKeyDown,\n    \"aria-haspopup\": \"dialog\",\n    \"aria-expanded\": isOpen,\n    \"aria-controls\": isOpen ? popoverId : undefined,\n  });\n\n  return (\n    <Popout\n      trigger={triggerElement}\n      position={position}\n      align={align}\n      action=\"click\"\n      toggleOnClick\n      offset={offset}\n      open={isOpen}\n      onOpenChange={handleOpenChange}\n      closeOnOutsideClick\n      closeOnEscape\n      className={triggerClassName}\n      contentClassName=\"puzzle-popover__surface\"\n    >\n      <PopoverContent\n        id={popoverId}\n        title={title}\n        ariaLabel={ariaLabel}\n        closable={closable}\n        closeLabel={closeLabel}\n        skipAutoFocusRef={skipAutoFocusRef}\n        dialogRef={dialogRef}\n        anchorRef={anchorRef}\n        onClose={() => handleOpenChange(false)}\n        className={className}\n      >\n        {children}\n      </PopoverContent>\n    </Popout>\n  );\n};\n\nexport { Popover, type PopoverProps };\n"],"mappings":"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"}

package/dist/components/overlays/popover/popover.css

@@ -0,0 +1,56 @@
+.puzzle-popover {
+  gap: var(--puzzle-space-2, .5rem);
+  outline: none;
+  flex-direction: column;
+  min-width: 0;
+  max-width: min(22.5rem, 100vw - 2rem);
+  display: flex;
+}
+
+.puzzle-popover__header {
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: var(--puzzle-space-3, .75rem);
+  display: flex;
+}
+
+.puzzle-popover__title {
+  min-width: 0;
+  font-size: var(--puzzle-font-size-base, 1rem);
+  font-weight: var(--puzzle-font-weight-semibold, 600);
+  overflow-wrap: anywhere;
+}
+
+.puzzle-popover__close {
+  width: 2rem;
+  height: 2rem;
+  margin: calc(var(--puzzle-space-1, .25rem) * -1)
+    calc(var(--puzzle-space-1, .25rem) * -1) 0 auto;
+  border-radius: var(--puzzle-radius-md, .5rem);
+  color: inherit;
+  font: inherit;
+  font-size: 1.5rem;
+  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;
+  padding: 0;
+  display: inline-flex;
+}
+
+.puzzle-popover__close:hover {
+  background: var(--puzzle-color-surface-sunken, #f1eee6);
+}
+
+.puzzle-popover__close:focus-visible {
+  outline: 2px solid var(--puzzle-color-ring, #2563eb);
+  outline-offset: 2px;
+}
+
+.puzzle-popover__body {
+  min-width: 0;
+  font-size: var(--puzzle-font-size-sm, .875rem);
+}

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

@@ -0,0 +1,33 @@
+"use client";
+let react = require("react");
+let react_dom = require("react-dom");
+let _puzzle_ui_theme_scope_context = require("@puzzle-ui/theme/scope-context");
+// src/components/overlays/portal/index.tsx
+const Portal = ({ targetId, container, children }) => {
+	const themeScope = (0, _puzzle_ui_theme_scope_context.useThemeScope)();
+	const [target, setTarget] = (0, react.useState)(null);
+	(0, react.useEffect)(() => {
+		if (container) {
+			setTarget(container);
+			return;
+		}
+		if (targetId) {
+			setTarget(document.getElementById(targetId) ?? document.body);
+			return;
+		}
+		if (themeScope) {
+			setTarget(themeScope.portalTarget);
+			return;
+		}
+		setTarget(document.body);
+	}, [
+		targetId,
+		container,
+		themeScope
+	]);
+	if (!target || children == null) return null;
+	return (0, react_dom.createPortal)(children, target);
+};
+exports.Portal = Portal;
+
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["useThemeScope","useState","createPortal"],"sources":["../../../../src/components/overlays/portal/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useState, type PropsWithChildren } from \"react\";\nimport { createPortal } from \"react-dom\";\n\nimport { useThemeScope } from \"@puzzle-ui/theme/scope-context\";\n\ntype PortalProps = PropsWithChildren<{\n  /**\n   * ID of an existing portal target.\n   * Falls back to document.body when the target does not exist.\n   */\n  targetId?: string;\n\n  /**\n   * Explicit portal target.\n   * Useful for iframe documents and custom overlay roots.\n   */\n  container?: HTMLElement | null;\n}>;\n\nconst Portal = ({ targetId, container, children }: PortalProps) => {\n  const themeScope = useThemeScope();\n  const [target, setTarget] = useState<HTMLElement | null>(null);\n\n  useEffect(() => {\n    if (container) {\n      setTarget(container);\n      return;\n    }\n\n    if (targetId) {\n      setTarget(document.getElementById(targetId) ?? document.body);\n      return;\n    }\n\n    if (themeScope) {\n      setTarget(themeScope.portalTarget);\n      return;\n    }\n\n    setTarget(document.body);\n  }, [targetId, container, themeScope]);\n\n  if (!target || children == null) {\n    return null;\n  }\n\n  return createPortal(children, target);\n};\n\nexport { Portal, type PortalProps };\n"],"mappings":";;;;;AAqBA,MAAM,UAAU,EAAE,UAAU,WAAW,eAA4B;CACjE,MAAM,cAAA,GAAaA,+BAAAA,cAAAA,CAAc;CACjC,MAAM,CAAC,QAAQ,cAAA,GAAaC,MAAAA,SAAAA,CAA6B,IAAI;CAE7D,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,IAAI,WAAW;GACb,UAAU,SAAS;GACnB;EACF;EAEA,IAAI,UAAU;GACZ,UAAU,SAAS,eAAe,QAAQ,KAAK,SAAS,IAAI;GAC5D;EACF;EAEA,IAAI,YAAY;GACd,UAAU,WAAW,YAAY;GACjC;EACF;EAEA,UAAU,SAAS,IAAI;CACzB,GAAG;EAAC;EAAU;EAAW;CAAU,CAAC;CAEpC,IAAI,CAAC,UAAU,YAAY,MACzB,OAAO;CAGT,QAAA,GAAOC,UAAAA,aAAAA,CAAa,UAAU,MAAM;AACtC"}

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

@@ -0,0 +1,15 @@
+import { PropsWithChildren } from "react";
+type PortalProps = PropsWithChildren<{
+  /**
+   * ID of an existing portal target.
+   * Falls back to document.body when the target does not exist.
+   */
+  targetId?: string;
+  /**
+   * Explicit portal target.
+   * Useful for iframe documents and custom overlay roots.
+   */
+  container?: HTMLElement | null;
+}>;
+declare const Portal: ({ targetId, container, children }: PortalProps) => import("react").ReactPortal | null;
+export { Portal, type PortalProps };

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

@@ -0,0 +1,15 @@
+import { PropsWithChildren } from "react";
+type PortalProps = PropsWithChildren<{
+  /**
+   * ID of an existing portal target.
+   * Falls back to document.body when the target does not exist.
+   */
+  targetId?: string;
+  /**
+   * Explicit portal target.
+   * Useful for iframe documents and custom overlay roots.
+   */
+  container?: HTMLElement | null;
+}>;
+declare const Portal: ({ targetId, container, children }: PortalProps) => import("react").ReactPortal | null;
+export { Portal, type PortalProps };

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

@@ -0,0 +1,33 @@
+"use client";
+import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import { useThemeScope } from "@puzzle-ui/theme/scope-context";
+// src/components/overlays/portal/index.tsx
+const Portal = ({ targetId, container, children }) => {
+	const themeScope = useThemeScope();
+	const [target, setTarget] = useState(null);
+	useEffect(() => {
+		if (container) {
+			setTarget(container);
+			return;
+		}
+		if (targetId) {
+			setTarget(document.getElementById(targetId) ?? document.body);
+			return;
+		}
+		if (themeScope) {
+			setTarget(themeScope.portalTarget);
+			return;
+		}
+		setTarget(document.body);
+	}, [
+		targetId,
+		container,
+		themeScope
+	]);
+	if (!target || children == null) return null;
+	return createPortal(children, target);
+};
+export { Portal };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/overlays/portal/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useState, type PropsWithChildren } from \"react\";\nimport { createPortal } from \"react-dom\";\n\nimport { useThemeScope } from \"@puzzle-ui/theme/scope-context\";\n\ntype PortalProps = PropsWithChildren<{\n  /**\n   * ID of an existing portal target.\n   * Falls back to document.body when the target does not exist.\n   */\n  targetId?: string;\n\n  /**\n   * Explicit portal target.\n   * Useful for iframe documents and custom overlay roots.\n   */\n  container?: HTMLElement | null;\n}>;\n\nconst Portal = ({ targetId, container, children }: PortalProps) => {\n  const themeScope = useThemeScope();\n  const [target, setTarget] = useState<HTMLElement | null>(null);\n\n  useEffect(() => {\n    if (container) {\n      setTarget(container);\n      return;\n    }\n\n    if (targetId) {\n      setTarget(document.getElementById(targetId) ?? document.body);\n      return;\n    }\n\n    if (themeScope) {\n      setTarget(themeScope.portalTarget);\n      return;\n    }\n\n    setTarget(document.body);\n  }, [targetId, container, themeScope]);\n\n  if (!target || children == null) {\n    return null;\n  }\n\n  return createPortal(children, target);\n};\n\nexport { Portal, type PortalProps };\n"],"mappings":";;;;;AAqBA,MAAM,UAAU,EAAE,UAAU,WAAW,eAA4B;CACjE,MAAM,aAAa,cAAc;CACjC,MAAM,CAAC,QAAQ,aAAa,SAA6B,IAAI;CAE7D,gBAAgB;EACd,IAAI,WAAW;GACb,UAAU,SAAS;GACnB;EACF;EAEA,IAAI,UAAU;GACZ,UAAU,SAAS,eAAe,QAAQ,KAAK,SAAS,IAAI;GAC5D;EACF;EAEA,IAAI,YAAY;GACd,UAAU,WAAW,YAAY;GACjC;EACF;EAEA,UAAU,SAAS,IAAI;CACzB,GAAG;EAAC;EAAU;EAAW;CAAU,CAAC;CAEpC,IAAI,CAAC,UAAU,YAAY,MACzB,OAAO;CAGT,OAAO,aAAa,UAAU,MAAM;AACtC"}

package/dist/components/overlays/portal/target.cjs

@@ -0,0 +1,17 @@
+;/* empty css             */
+let _puzzle_ui_core = require("@puzzle-ui/core");
+require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+// src/components/overlays/portal/target.tsx
+const PortalTarget = ({ id, className, children, ...props }) => {
+	const classes = (0, _puzzle_ui_core.cn)("puzzle-portal-target", className);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		id,
+		className: classes,
+		...props,
+		children
+	});
+};
+exports.PortalTarget = PortalTarget;
+
+//# sourceMappingURL=target.cjs.map

package/dist/components/overlays/portal/target.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"target.cjs","names":["cn"],"sources":["../../../../src/components/overlays/portal/target.tsx"],"sourcesContent":["import { cn } from \"@puzzle-ui/core\";\nimport { type ComponentPropsWithRef } from \"react\";\nimport \"./target.css\";\n\ntype PortalTargetOwnProps = {\n  id: string;\n};\ntype PortalTargetProps = PortalTargetOwnProps &\n  Omit<ComponentPropsWithRef<\"div\">, keyof PortalTargetOwnProps>;\n\nconst PortalTarget = ({\n  id,\n  className,\n  children,\n  ...props\n}: PortalTargetProps) => {\n  const classes = cn(\"puzzle-portal-target\", className);\n  return (\n    <div id={id} className={classes} {...props}>\n      {children}\n    </div>\n  );\n};\n\nexport { PortalTarget, type PortalTargetProps };\n"],"mappings":";;;;;AAUA,MAAM,gBAAgB,EACpB,IACA,WACA,UACA,GAAG,YACoB;CACvB,MAAM,WAAA,GAAUA,gBAAAA,GAAAA,CAAG,wBAAwB,SAAS;CACpD,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EAAS;EAAI,WAAW;EAAS,GAAI;EAClC;CACE,CAAA;AAET"}

package/dist/components/overlays/portal/target.css

@@ -0,0 +1,3 @@
+.puzzle-portal-target:empty {
+  display: none;
+}

package/dist/components/overlays/portal/target.d.cts

@@ -0,0 +1,7 @@
+import { ComponentPropsWithRef } from "react";
+type PortalTargetOwnProps = {
+  id: string;
+};
+type PortalTargetProps = PortalTargetOwnProps & Omit<ComponentPropsWithRef<"div">, keyof PortalTargetOwnProps>;
+declare const PortalTarget: ({ id, className, children, ...props }: PortalTargetProps) => import("react").JSX.Element;
+export { PortalTarget, type PortalTargetProps };

package/dist/components/overlays/portal/target.d.ts

@@ -0,0 +1,7 @@
+import { ComponentPropsWithRef } from "react";
+type PortalTargetOwnProps = {
+  id: string;
+};
+type PortalTargetProps = PortalTargetOwnProps & Omit<ComponentPropsWithRef<"div">, keyof PortalTargetOwnProps>;
+declare const PortalTarget: ({ id, className, children, ...props }: PortalTargetProps) => import("react").JSX.Element;
+export { PortalTarget, type PortalTargetProps };

package/dist/components/overlays/portal/target.js

@@ -0,0 +1,17 @@
+import "./target.css";
+import { cn } from "@puzzle-ui/core";
+import "react";
+import { jsx } from "react/jsx-runtime";
+// src/components/overlays/portal/target.tsx
+const PortalTarget = ({ id, className, children, ...props }) => {
+	const classes = cn("puzzle-portal-target", className);
+	return /* @__PURE__ */ jsx("div", {
+		id,
+		className: classes,
+		...props,
+		children
+	});
+};
+export { PortalTarget };
+
+//# sourceMappingURL=target.js.map

package/dist/components/overlays/portal/target.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"target.js","names":[],"sources":["../../../../src/components/overlays/portal/target.tsx"],"sourcesContent":["import { cn } from \"@puzzle-ui/core\";\nimport { type ComponentPropsWithRef } from \"react\";\nimport \"./target.css\";\n\ntype PortalTargetOwnProps = {\n  id: string;\n};\ntype PortalTargetProps = PortalTargetOwnProps &\n  Omit<ComponentPropsWithRef<\"div\">, keyof PortalTargetOwnProps>;\n\nconst PortalTarget = ({\n  id,\n  className,\n  children,\n  ...props\n}: PortalTargetProps) => {\n  const classes = cn(\"puzzle-portal-target\", className);\n  return (\n    <div id={id} className={classes} {...props}>\n      {children}\n    </div>\n  );\n};\n\nexport { PortalTarget, type PortalTargetProps };\n"],"mappings":";;;;;AAUA,MAAM,gBAAgB,EACpB,IACA,WACA,UACA,GAAG,YACoB;CACvB,MAAM,UAAU,GAAG,wBAAwB,SAAS;CACpD,OACE,oBAAC,OAAD;EAAS;EAAI,WAAW;EAAS,GAAI;EAClC;CACE,CAAA;AAET"}

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

@@ -0,0 +1,71 @@
+"use client";
+const require_index = require("../popout/index.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/overlays/tooltip/index.tsx
+const arrowSize = 8;
+const setRef = (ref, value) => {
+	if (typeof ref === "function") ref(value);
+	else if (ref) ref.current = value;
+};
+const TooltipContent = ({ id, children, className }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		id,
+		role: "tooltip",
+		className: (0, _puzzle_ui_core.cn)("puzzle-tooltip", className),
+		children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			"aria-hidden": "true",
+			className: "puzzle-tooltip__arrow"
+		})]
+	});
+};
+const Tooltip = ({ trigger, children, position = "bottom", align = "center", offset = arrowSize, exitDelay = 100, open, defaultOpen = false, onOpenChange, className, triggerClassName }) => {
+	const tooltipId = (0, react.useId)();
+	const [internalOpen, setInternalOpen] = (0, react.useState)(defaultOpen);
+	const isOpen = open ?? internalOpen;
+	const handleOpenChange = (0, react.useCallback)((nextOpen) => {
+		if (open === void 0) setInternalOpen(nextOpen);
+		onOpenChange?.(nextOpen);
+	}, [open, onOpenChange]);
+	const handleFocus = (event) => {
+		trigger.props.onFocus?.(event);
+		if (!event.defaultPrevented) handleOpenChange(true);
+	};
+	const handleBlur = (event) => {
+		trigger.props.onBlur?.(event);
+		if (!event.defaultPrevented && !event.currentTarget.contains(event.relatedTarget)) handleOpenChange(false);
+	};
+	const describedBy = [trigger.props["aria-describedby"], isOpen ? tooltipId : void 0].filter(Boolean).join(" ");
+	const triggerElement = (0, react.cloneElement)(trigger, {
+		ref: (node) => {
+			setRef(trigger.props.ref, node);
+		},
+		onFocus: handleFocus,
+		onBlur: handleBlur,
+		"aria-describedby": describedBy || void 0
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.Popout, {
+		trigger: triggerElement,
+		position,
+		align,
+		action: "hover",
+		offset,
+		exitDelay,
+		open: isOpen,
+		onOpenChange: handleOpenChange,
+		closeOnOutsideClick: true,
+		closeOnEscape: true,
+		className: triggerClassName,
+		contentClassName: "puzzle-tooltip__content",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipContent, {
+			id: tooltipId,
+			className,
+			children
+		})
+	});
+};
+exports.Tooltip = Tooltip;
+
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["cn","useId","useState","useCallback","cloneElement","Popout"],"sources":["../../../../src/components/overlays/tooltip/index.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  cloneElement,\n  useCallback,\n  useId,\n  useState,\n  type FocusEvent,\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n  type RefAttributes,\n} from \"react\";\n\nimport { cn } from \"@puzzle-ui/core\";\n\nimport { Popout, type PopoutAlignment, type PopoutPosition } from \"../popout\";\n\nimport \"./tooltip.css\";\n\ntype TooltipTriggerProps = HTMLAttributes<HTMLElement> &\n  RefAttributes<HTMLElement>;\n\ntype TooltipArrowSide = \"top\" | \"right\" | \"bottom\" | \"left\";\n\ntype TooltipProps = {\n  trigger: ReactElement<TooltipTriggerProps>;\n  children: ReactNode;\n  position?: PopoutPosition;\n  align?: PopoutAlignment;\n  offset?: number;\n  exitDelay?: number;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  className?: string;\n  triggerClassName?: string;\n};\n\ntype TooltipContentProps = {\n  id?: string;\n  children: ReactNode;\n  className?: string;\n};\n\nconst arrowSize = 8;\n\nconst setRef = <T,>(ref: Ref<T> | undefined, value: T | null): void => {\n  if (typeof ref === \"function\") {\n    ref(value);\n  } else if (ref) {\n    ref.current = value;\n  }\n};\n\nconst TooltipContent = ({ id, children, className }: TooltipContentProps) => {\n  return (\n    <div id={id} role=\"tooltip\" className={cn(\"puzzle-tooltip\", className)}>\n      {children}\n\n      <span aria-hidden=\"true\" className=\"puzzle-tooltip__arrow\" />\n    </div>\n  );\n};\n\nconst Tooltip = ({\n  trigger,\n  children,\n  position = \"bottom\",\n  align = \"center\",\n  offset = arrowSize,\n  exitDelay = 100,\n  open,\n  defaultOpen = false,\n  onOpenChange,\n  className,\n  triggerClassName,\n}: TooltipProps) => {\n  const tooltipId = useId();\n\n  const [internalOpen, setInternalOpen] = useState(defaultOpen);\n\n  const isOpen = open ?? internalOpen;\n\n  const handleOpenChange = useCallback(\n    (nextOpen: boolean) => {\n      if (open === undefined) {\n        setInternalOpen(nextOpen);\n      }\n\n      onOpenChange?.(nextOpen);\n    },\n    [open, onOpenChange],\n  );\n\n  const handleFocus = (event: FocusEvent<HTMLElement>) => {\n    trigger.props.onFocus?.(event);\n\n    if (!event.defaultPrevented) {\n      handleOpenChange(true);\n    }\n  };\n\n  const handleBlur = (event: FocusEvent<HTMLElement>) => {\n    trigger.props.onBlur?.(event);\n\n    if (\n      !event.defaultPrevented &&\n      !event.currentTarget.contains(event.relatedTarget as Node | null)\n    ) {\n      handleOpenChange(false);\n    }\n  };\n\n  const describedBy = [\n    trigger.props[\"aria-describedby\"],\n    isOpen ? tooltipId : undefined,\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  const triggerElement = cloneElement(trigger, {\n    ref: (node: HTMLElement | null) => {\n      setRef(trigger.props.ref, node);\n    },\n    onFocus: handleFocus,\n    onBlur: handleBlur,\n    \"aria-describedby\": describedBy || undefined,\n  });\n\n  return (\n    <Popout\n      trigger={triggerElement}\n      position={position}\n      align={align}\n      action=\"hover\"\n      offset={offset}\n      exitDelay={exitDelay}\n      open={isOpen}\n      onOpenChange={handleOpenChange}\n      closeOnOutsideClick\n      closeOnEscape\n      className={triggerClassName}\n      contentClassName=\"puzzle-tooltip__content\"\n    >\n      <TooltipContent id={tooltipId} className={className}>\n        {children}\n      </TooltipContent>\n    </Popout>\n  );\n};\n\nexport {\n  Tooltip,\n  type TooltipProps,\n  type TooltipContentProps,\n  type TooltipArrowSide,\n};\n"],"mappings":";;;;;;;AA8CA,MAAM,YAAY;AAElB,MAAM,UAAc,KAAyB,UAA0B;CACrE,IAAI,OAAO,QAAQ,YACjB,IAAI,KAAK;MACJ,IAAI,KACT,IAAI,UAAU;AAElB;AAEA,MAAM,kBAAkB,EAAE,IAAI,UAAU,gBAAqC;CAC3E,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EAAS;EAAI,MAAK;EAAU,YAAA,GAAWA,gBAAAA,GAAAA,CAAG,kBAAkB,SAAS;EAArE,UAAA,CACG,UAED,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GAAM,eAAY;GAAO,WAAU;EAAyB,CAAA,CACzD;;AAET;AAEA,MAAM,WAAW,EACf,SACA,UACA,WAAW,UACX,QAAQ,UACR,SAAS,WACT,YAAY,KACZ,MACA,cAAc,OACd,cACA,WACA,uBACkB;CAClB,MAAM,aAAA,GAAYC,MAAAA,MAAAA,CAAM;CAExB,MAAM,CAAC,cAAc,oBAAA,GAAmBC,MAAAA,SAAAA,CAAS,WAAW;CAE5D,MAAM,SAAS,QAAQ;CAEvB,MAAM,oBAAA,GAAmBC,MAAAA,YAAAA,EACtB,aAAsB;EACrB,IAAI,SAAS,KAAA,GACX,gBAAgB,QAAQ;EAG1B,eAAe,QAAQ;CACzB,GACA,CAAC,MAAM,YAAY,CACrB;CAEA,MAAM,eAAe,UAAmC;EACtD,QAAQ,MAAM,UAAU,KAAK;EAE7B,IAAI,CAAC,MAAM,kBACT,iBAAiB,IAAI;CAEzB;CAEA,MAAM,cAAc,UAAmC;EACrD,QAAQ,MAAM,SAAS,KAAK;EAE5B,IACE,CAAC,MAAM,oBACP,CAAC,MAAM,cAAc,SAAS,MAAM,aAA4B,GAEhE,iBAAiB,KAAK;CAE1B;CAEA,MAAM,cAAc,CAClB,QAAQ,MAAM,qBACd,SAAS,YAAY,KAAA,CACvB,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CAEX,MAAM,kBAAA,GAAiBC,MAAAA,aAAAA,CAAa,SAAS;EAC3C,MAAM,SAA6B;GACjC,OAAO,QAAQ,MAAM,KAAK,IAAI;EAChC;EACA,SAAS;EACT,QAAQ;EACR,oBAAoB,eAAe,KAAA;CACrC,CAAC;CAED,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,QAAD;EACE,SAAS;EACC;EACH;EACP,QAAO;EACC;EACG;EACX,MAAM;EACN,cAAc;EACd,qBAAA;EACA,eAAA;EACA,WAAW;EACX,kBAAiB;EAEjB,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,gBAAD;GAAgB,IAAI;GAAsB;GACvC;EACa,CAAA;CACV,CAAA;AAEZ"}

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

@@ -0,0 +1,24 @@
+import { PopoutAlignment, PopoutPosition } from "../popout/index.cjs";
+import { HTMLAttributes, ReactElement, ReactNode, RefAttributes } from "react";
+type TooltipTriggerProps = HTMLAttributes<HTMLElement> & RefAttributes<HTMLElement>;
+type TooltipArrowSide = "top" | "right" | "bottom" | "left";
+type TooltipProps = {
+  trigger: ReactElement<TooltipTriggerProps>;
+  children: ReactNode;
+  position?: PopoutPosition;
+  align?: PopoutAlignment;
+  offset?: number;
+  exitDelay?: number;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  className?: string;
+  triggerClassName?: string;
+};
+type TooltipContentProps = {
+  id?: string;
+  children: ReactNode;
+  className?: string;
+};
+declare const Tooltip: ({ trigger, children, position, align, offset, exitDelay, open, defaultOpen, onOpenChange, className, triggerClassName }: TooltipProps) => import("react").JSX.Element;
+export { Tooltip, type TooltipArrowSide, type TooltipContentProps, type TooltipProps };

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

@@ -0,0 +1,24 @@
+import { PopoutAlignment, PopoutPosition } from "../popout/index.js";
+import { HTMLAttributes, ReactElement, ReactNode, RefAttributes } from "react";
+type TooltipTriggerProps = HTMLAttributes<HTMLElement> & RefAttributes<HTMLElement>;
+type TooltipArrowSide = "top" | "right" | "bottom" | "left";
+type TooltipProps = {
+  trigger: ReactElement<TooltipTriggerProps>;
+  children: ReactNode;
+  position?: PopoutPosition;
+  align?: PopoutAlignment;
+  offset?: number;
+  exitDelay?: number;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  className?: string;
+  triggerClassName?: string;
+};
+type TooltipContentProps = {
+  id?: string;
+  children: ReactNode;
+  className?: string;
+};
+declare const Tooltip: ({ trigger, children, position, align, offset, exitDelay, open, defaultOpen, onOpenChange, className, triggerClassName }: TooltipProps) => import("react").JSX.Element;
+export { Tooltip, type TooltipArrowSide, type TooltipContentProps, type TooltipProps };

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

@@ -0,0 +1,71 @@
+"use client";
+import { Popout } from "../popout/index.js";
+import "./tooltip.css";
+import { cn } from "@puzzle-ui/core";
+import { cloneElement, useCallback, useId, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/overlays/tooltip/index.tsx
+const arrowSize = 8;
+const setRef = (ref, value) => {
+	if (typeof ref === "function") ref(value);
+	else if (ref) ref.current = value;
+};
+const TooltipContent = ({ id, children, className }) => {
+	return /* @__PURE__ */ jsxs("div", {
+		id,
+		role: "tooltip",
+		className: cn("puzzle-tooltip", className),
+		children: [children, /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: "puzzle-tooltip__arrow"
+		})]
+	});
+};
+const Tooltip = ({ trigger, children, position = "bottom", align = "center", offset = arrowSize, exitDelay = 100, open, defaultOpen = false, onOpenChange, className, triggerClassName }) => {
+	const tooltipId = useId();
+	const [internalOpen, setInternalOpen] = useState(defaultOpen);
+	const isOpen = open ?? internalOpen;
+	const handleOpenChange = useCallback((nextOpen) => {
+		if (open === void 0) setInternalOpen(nextOpen);
+		onOpenChange?.(nextOpen);
+	}, [open, onOpenChange]);
+	const handleFocus = (event) => {
+		trigger.props.onFocus?.(event);
+		if (!event.defaultPrevented) handleOpenChange(true);
+	};
+	const handleBlur = (event) => {
+		trigger.props.onBlur?.(event);
+		if (!event.defaultPrevented && !event.currentTarget.contains(event.relatedTarget)) handleOpenChange(false);
+	};
+	const describedBy = [trigger.props["aria-describedby"], isOpen ? tooltipId : void 0].filter(Boolean).join(" ");
+	const triggerElement = cloneElement(trigger, {
+		ref: (node) => {
+			setRef(trigger.props.ref, node);
+		},
+		onFocus: handleFocus,
+		onBlur: handleBlur,
+		"aria-describedby": describedBy || void 0
+	});
+	return /* @__PURE__ */ jsx(Popout, {
+		trigger: triggerElement,
+		position,
+		align,
+		action: "hover",
+		offset,
+		exitDelay,
+		open: isOpen,
+		onOpenChange: handleOpenChange,
+		closeOnOutsideClick: true,
+		closeOnEscape: true,
+		className: triggerClassName,
+		contentClassName: "puzzle-tooltip__content",
+		children: /* @__PURE__ */ jsx(TooltipContent, {
+			id: tooltipId,
+			className,
+			children
+		})
+	});
+};
+export { Tooltip };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/overlays/tooltip/index.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  cloneElement,\n  useCallback,\n  useId,\n  useState,\n  type FocusEvent,\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n  type RefAttributes,\n} from \"react\";\n\nimport { cn } from \"@puzzle-ui/core\";\n\nimport { Popout, type PopoutAlignment, type PopoutPosition } from \"../popout\";\n\nimport \"./tooltip.css\";\n\ntype TooltipTriggerProps = HTMLAttributes<HTMLElement> &\n  RefAttributes<HTMLElement>;\n\ntype TooltipArrowSide = \"top\" | \"right\" | \"bottom\" | \"left\";\n\ntype TooltipProps = {\n  trigger: ReactElement<TooltipTriggerProps>;\n  children: ReactNode;\n  position?: PopoutPosition;\n  align?: PopoutAlignment;\n  offset?: number;\n  exitDelay?: number;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  className?: string;\n  triggerClassName?: string;\n};\n\ntype TooltipContentProps = {\n  id?: string;\n  children: ReactNode;\n  className?: string;\n};\n\nconst arrowSize = 8;\n\nconst setRef = <T,>(ref: Ref<T> | undefined, value: T | null): void => {\n  if (typeof ref === \"function\") {\n    ref(value);\n  } else if (ref) {\n    ref.current = value;\n  }\n};\n\nconst TooltipContent = ({ id, children, className }: TooltipContentProps) => {\n  return (\n    <div id={id} role=\"tooltip\" className={cn(\"puzzle-tooltip\", className)}>\n      {children}\n\n      <span aria-hidden=\"true\" className=\"puzzle-tooltip__arrow\" />\n    </div>\n  );\n};\n\nconst Tooltip = ({\n  trigger,\n  children,\n  position = \"bottom\",\n  align = \"center\",\n  offset = arrowSize,\n  exitDelay = 100,\n  open,\n  defaultOpen = false,\n  onOpenChange,\n  className,\n  triggerClassName,\n}: TooltipProps) => {\n  const tooltipId = useId();\n\n  const [internalOpen, setInternalOpen] = useState(defaultOpen);\n\n  const isOpen = open ?? internalOpen;\n\n  const handleOpenChange = useCallback(\n    (nextOpen: boolean) => {\n      if (open === undefined) {\n        setInternalOpen(nextOpen);\n      }\n\n      onOpenChange?.(nextOpen);\n    },\n    [open, onOpenChange],\n  );\n\n  const handleFocus = (event: FocusEvent<HTMLElement>) => {\n    trigger.props.onFocus?.(event);\n\n    if (!event.defaultPrevented) {\n      handleOpenChange(true);\n    }\n  };\n\n  const handleBlur = (event: FocusEvent<HTMLElement>) => {\n    trigger.props.onBlur?.(event);\n\n    if (\n      !event.defaultPrevented &&\n      !event.currentTarget.contains(event.relatedTarget as Node | null)\n    ) {\n      handleOpenChange(false);\n    }\n  };\n\n  const describedBy = [\n    trigger.props[\"aria-describedby\"],\n    isOpen ? tooltipId : undefined,\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  const triggerElement = cloneElement(trigger, {\n    ref: (node: HTMLElement | null) => {\n      setRef(trigger.props.ref, node);\n    },\n    onFocus: handleFocus,\n    onBlur: handleBlur,\n    \"aria-describedby\": describedBy || undefined,\n  });\n\n  return (\n    <Popout\n      trigger={triggerElement}\n      position={position}\n      align={align}\n      action=\"hover\"\n      offset={offset}\n      exitDelay={exitDelay}\n      open={isOpen}\n      onOpenChange={handleOpenChange}\n      closeOnOutsideClick\n      closeOnEscape\n      className={triggerClassName}\n      contentClassName=\"puzzle-tooltip__content\"\n    >\n      <TooltipContent id={tooltipId} className={className}>\n        {children}\n      </TooltipContent>\n    </Popout>\n  );\n};\n\nexport {\n  Tooltip,\n  type TooltipProps,\n  type TooltipContentProps,\n  type TooltipArrowSide,\n};\n"],"mappings":";;;;;;;AA8CA,MAAM,YAAY;AAElB,MAAM,UAAc,KAAyB,UAA0B;CACrE,IAAI,OAAO,QAAQ,YACjB,IAAI,KAAK;MACJ,IAAI,KACT,IAAI,UAAU;AAElB;AAEA,MAAM,kBAAkB,EAAE,IAAI,UAAU,gBAAqC;CAC3E,OACE,qBAAC,OAAD;EAAS;EAAI,MAAK;EAAU,WAAW,GAAG,kBAAkB,SAAS;EAArE,UAAA,CACG,UAED,oBAAC,QAAD;GAAM,eAAY;GAAO,WAAU;EAAyB,CAAA,CACzD;;AAET;AAEA,MAAM,WAAW,EACf,SACA,UACA,WAAW,UACX,QAAQ,UACR,SAAS,WACT,YAAY,KACZ,MACA,cAAc,OACd,cACA,WACA,uBACkB;CAClB,MAAM,YAAY,MAAM;CAExB,MAAM,CAAC,cAAc,mBAAmB,SAAS,WAAW;CAE5D,MAAM,SAAS,QAAQ;CAEvB,MAAM,mBAAmB,aACtB,aAAsB;EACrB,IAAI,SAAS,KAAA,GACX,gBAAgB,QAAQ;EAG1B,eAAe,QAAQ;CACzB,GACA,CAAC,MAAM,YAAY,CACrB;CAEA,MAAM,eAAe,UAAmC;EACtD,QAAQ,MAAM,UAAU,KAAK;EAE7B,IAAI,CAAC,MAAM,kBACT,iBAAiB,IAAI;CAEzB;CAEA,MAAM,cAAc,UAAmC;EACrD,QAAQ,MAAM,SAAS,KAAK;EAE5B,IACE,CAAC,MAAM,oBACP,CAAC,MAAM,cAAc,SAAS,MAAM,aAA4B,GAEhE,iBAAiB,KAAK;CAE1B;CAEA,MAAM,cAAc,CAClB,QAAQ,MAAM,qBACd,SAAS,YAAY,KAAA,CACvB,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CAEX,MAAM,iBAAiB,aAAa,SAAS;EAC3C,MAAM,SAA6B;GACjC,OAAO,QAAQ,MAAM,KAAK,IAAI;EAChC;EACA,SAAS;EACT,QAAQ;EACR,oBAAoB,eAAe,KAAA;CACrC,CAAC;CAED,OACE,oBAAC,QAAD;EACE,SAAS;EACC;EACH;EACP,QAAO;EACC;EACG;EACX,MAAM;EACN,cAAc;EACd,qBAAA;EACA,eAAA;EACA,WAAW;EACX,kBAAiB;EAEjB,UAAA,oBAAC,gBAAD;GAAgB,IAAI;GAAsB;GACvC;EACa,CAAA;CACV,CAAA;AAEZ"}

package/dist/components/overlays/tooltip/tooltip.css

@@ -0,0 +1,67 @@
+.puzzle-tooltip {
+  background: var(--puzzle-tooltip-background, var(--puzzle-color-text, #1f1c19));
+  width: max-content;
+  max-width: min(320px, 100vw - 32px);
+  color: var(--puzzle-tooltip-color, var(--puzzle-color-background, #fff));
+  font-size: var(--puzzle-font-size-sm, .8125rem);
+  overflow-wrap: break-word;
+  border-radius: 6px;
+  padding: 8px 12px;
+  line-height: 1.4;
+  position: relative;
+}
+
+.puzzle-tooltip__content.puzzle-popout__content {
+  background: inherit;
+  border: inherit;
+  box-shadow: none;
+  overflow: visible;
+}
+
+.puzzle-tooltip__arrow {
+  z-index: 1;
+  background: inherit;
+  pointer-events: none;
+  width: 12px;
+  height: 8px;
+  position: absolute;
+}
+
+.puzzle-popout__content[data-placement="top"] .puzzle-tooltip__arrow {
+  clip-path: polygon(0 0, 100% 0, 50% 100%);
+  bottom: -8px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.puzzle-popout__content[data-placement="bottom"] .puzzle-tooltip__arrow {
+  clip-path: polygon(50% 0, 100% 100%, 0 100%);
+  top: -8px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.puzzle-popout__content[data-placement="left"] .puzzle-tooltip__arrow {
+  clip-path: polygon(0 0, 100% 50%, 0 100%);
+  width: 8px;
+  height: 12px;
+  top: 50%;
+  right: -8px;
+  transform: translateY(-50%);
+}
+
+.puzzle-popout__content[data-placement="right"] .puzzle-tooltip__arrow {
+  clip-path: polygon(100% 0, 0 50%, 100% 100%);
+  width: 8px;
+  height: 12px;
+  top: 50%;
+  left: -8px;
+  transform: translateY(-50%);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .puzzle-tooltip, .puzzle-tooltip__arrow {
+    transition: none;
+    animation: none;
+  }
+}

package/dist/components/typography/heading.cjs

@@ -0,0 +1,14 @@
+let _puzzle_ui_core = require("@puzzle-ui/core");
+let react_jsx_runtime = require("react/jsx-runtime");
+// src/components/typography/heading.tsx
+const Heading = ({ level, as, className, ...props }) => {
+	const Component = as ?? "h2";
+	const classes = (0, _puzzle_ui_core.cn)("puzzle-heading", `puzzle-typography-${level}`, className);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
+		className: classes,
+		...props
+	});
+};
+exports.Heading = Heading;
+
+//# sourceMappingURL=heading.cjs.map

package/dist/components/typography/heading.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"heading.cjs","names":["cn"],"sources":["../../../src/components/typography/heading.tsx"],"sourcesContent":["import { cn } from \"@puzzle-ui/core\";\nimport type { ComponentPropsWithRef, ElementType } from \"react\";\n\ntype HeadingLevel =\n  | \"display1\"\n  | \"display2\"\n  | \"headline1\"\n  | \"headline2\"\n  | \"headline3\"\n  | \"headline4\";\n\ntype PolymorphicProps<E extends ElementType, OwnProps> = OwnProps & {\n  as?: E;\n} & Omit<ComponentPropsWithRef<E>, keyof OwnProps | \"as\">;\n\ntype HeadingOwnProps = {\n  level: HeadingLevel;\n};\n\ntype HeadingProps<E extends ElementType = \"h2\"> = PolymorphicProps<\n  E,\n  HeadingOwnProps\n>;\n\nconst Heading = <E extends ElementType = \"h2\">({\n  level,\n  as,\n  className,\n  ...props\n}: HeadingProps<E>) => {\n  const Component = as ?? \"h2\";\n  const classes = cn(\"puzzle-heading\", `puzzle-typography-${level}`, className);\n  return <Component className={classes} {...props}></Component>;\n};\n\nexport { Heading, type HeadingProps, type HeadingLevel };\n"],"mappings":";;;AAwBA,MAAM,WAAyC,EAC7C,OACA,IACA,WACA,GAAG,YACkB;CACrB,MAAM,YAAY,MAAM;CACxB,MAAM,WAAA,GAAUA,gBAAAA,GAAAA,CAAG,kBAAkB,qBAAqB,SAAS,SAAS;CAC5E,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAAC,WAAD;EAAW,WAAW;EAAS,GAAI;CAAkB,CAAA;AAC9D"}

package/dist/components/typography/heading.d.cts

@@ -0,0 +1,11 @@
+import { ComponentPropsWithRef, ElementType } from "react";
+type HeadingLevel = "display1" | "display2" | "headline1" | "headline2" | "headline3" | "headline4";
+type PolymorphicProps<E extends ElementType, OwnProps> = OwnProps & {
+  as?: E;
+} & Omit<ComponentPropsWithRef<E>, keyof OwnProps | "as">;
+type HeadingOwnProps = {
+  level: HeadingLevel;
+};
+type HeadingProps<E extends ElementType = "h2"> = PolymorphicProps<E, HeadingOwnProps>;
+declare const Heading: <E extends ElementType = "h2">({ level, as, className, ...props }: HeadingProps<E>) => import("react").JSX.Element;
+export { Heading, type HeadingLevel, type HeadingProps };

package/dist/components/typography/heading.d.ts

@@ -0,0 +1,11 @@
+import { ComponentPropsWithRef, ElementType } from "react";
+type HeadingLevel = "display1" | "display2" | "headline1" | "headline2" | "headline3" | "headline4";
+type PolymorphicProps<E extends ElementType, OwnProps> = OwnProps & {
+  as?: E;
+} & Omit<ComponentPropsWithRef<E>, keyof OwnProps | "as">;
+type HeadingOwnProps = {
+  level: HeadingLevel;
+};
+type HeadingProps<E extends ElementType = "h2"> = PolymorphicProps<E, HeadingOwnProps>;
+declare const Heading: <E extends ElementType = "h2">({ level, as, className, ...props }: HeadingProps<E>) => import("react").JSX.Element;
+export { Heading, type HeadingLevel, type HeadingProps };

package/dist/components/typography/heading.js

@@ -0,0 +1,14 @@
+import { cn } from "@puzzle-ui/core";
+import { jsx } from "react/jsx-runtime";
+// src/components/typography/heading.tsx
+const Heading = ({ level, as, className, ...props }) => {
+	const Component = as ?? "h2";
+	const classes = cn("puzzle-heading", `puzzle-typography-${level}`, className);
+	return /* @__PURE__ */ jsx(Component, {
+		className: classes,
+		...props
+	});
+};
+export { Heading };
+
+//# sourceMappingURL=heading.js.map

package/dist/components/typography/heading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"heading.js","names":[],"sources":["../../../src/components/typography/heading.tsx"],"sourcesContent":["import { cn } from \"@puzzle-ui/core\";\nimport type { ComponentPropsWithRef, ElementType } from \"react\";\n\ntype HeadingLevel =\n  | \"display1\"\n  | \"display2\"\n  | \"headline1\"\n  | \"headline2\"\n  | \"headline3\"\n  | \"headline4\";\n\ntype PolymorphicProps<E extends ElementType, OwnProps> = OwnProps & {\n  as?: E;\n} & Omit<ComponentPropsWithRef<E>, keyof OwnProps | \"as\">;\n\ntype HeadingOwnProps = {\n  level: HeadingLevel;\n};\n\ntype HeadingProps<E extends ElementType = \"h2\"> = PolymorphicProps<\n  E,\n  HeadingOwnProps\n>;\n\nconst Heading = <E extends ElementType = \"h2\">({\n  level,\n  as,\n  className,\n  ...props\n}: HeadingProps<E>) => {\n  const Component = as ?? \"h2\";\n  const classes = cn(\"puzzle-heading\", `puzzle-typography-${level}`, className);\n  return <Component className={classes} {...props}></Component>;\n};\n\nexport { Heading, type HeadingProps, type HeadingLevel };\n"],"mappings":";;;AAwBA,MAAM,WAAyC,EAC7C,OACA,IACA,WACA,GAAG,YACkB;CACrB,MAAM,YAAY,MAAM;CACxB,MAAM,UAAU,GAAG,kBAAkB,qBAAqB,SAAS,SAAS;CAC5E,OAAO,oBAAC,WAAD;EAAW,WAAW;EAAS,GAAI;CAAkB,CAAA;AAC9D"}

package/dist/components/typography/text.cjs

@@ -0,0 +1,14 @@
+let _puzzle_ui_core = require("@puzzle-ui/core");
+let react_jsx_runtime = require("react/jsx-runtime");
+// src/components/typography/text.tsx
+const Text = ({ as, type = "body1", className, ...props }) => {
+	const Component = as ?? "span";
+	const classes = (0, _puzzle_ui_core.cn)("puzzle-text", `puzzle-typography-${type}`, className);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
+		...props,
+		className: classes
+	});
+};
+exports.Text = Text;
+
+//# sourceMappingURL=text.cjs.map