@dreamtree-org/twreact-ui 1.3.0 → 1.3.2

package/dist/esm/components/core/Input.js

@@ -0,0 +1,179 @@
+'use client';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useId, useRef, useCallback, useState } from 'react';
+import { Search, EyeOff, Eye, X } from 'lucide-react';
+import { cn } from '../../utils/cn.js';
+
+var _excluded = ["id", "className", "type", "label", "placeholder", "error", "success", "helperText", "disabled", "required", "clearable", "icon", "iconPosition", "onClear", "showCount", "maxLength", "readOnly", "onChange", "value", "defaultValue"];
+var Input = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
+  var id = props.id,
+    className = props.className,
+    _props$type = props.type,
+    type = _props$type === void 0 ? "text" : _props$type,
+    label = props.label,
+    placeholder = props.placeholder,
+    error = props.error,
+    success = props.success,
+    helperText = props.helperText,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled,
+    _props$required = props.required,
+    required = _props$required === void 0 ? false : _props$required,
+    _props$clearable = props.clearable,
+    clearable = _props$clearable === void 0 ? false : _props$clearable,
+    icon = props.icon,
+    _props$iconPosition = props.iconPosition,
+    iconPosition = _props$iconPosition === void 0 ? "left" : _props$iconPosition,
+    onClear = props.onClear,
+    _props$showCount = props.showCount,
+    showCount = _props$showCount === void 0 ? false : _props$showCount,
+    maxLength = props.maxLength,
+    _props$readOnly = props.readOnly,
+    readOnly = _props$readOnly === void 0 ? false : _props$readOnly,
+    onChange = props.onChange,
+    value = props.value,
+    defaultValue = props.defaultValue,
+    rest = _objectWithoutProperties(props, _excluded);
+  var internalId = useId();
+  var inputId = id || "input-".concat(internalId);
+  var isSearch = type === "search";
+  var isPassword = type === "password";
+  var localRef = useRef(null);
+  // Keep our own ref for imperative work (clear/focus) and forward the node
+  // to the consumer's ref, whether it is an object ref or a callback ref.
+  var setRefs = useCallback(function (node) {
+    localRef.current = node;
+    if (typeof forwardedRef === "function") forwardedRef(node);else if (forwardedRef) forwardedRef.current = node;
+  }, [forwardedRef]);
+  // track visibility (password)
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    showPassword = _useState2[0],
+    setShowPassword = _useState2[1];
+  // value length (controlled: derived from `value`; uncontrolled: tracked on change)
+  var isControlled = typeof value !== "undefined";
+  var _useState3 = useState(function () {
+      return typeof defaultValue !== "undefined" ? String(defaultValue !== null && defaultValue !== void 0 ? defaultValue : "").length : 0;
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    uncontrolledLength = _useState4[0],
+    setUncontrolledLength = _useState4[1];
+  var currentLength = isControlled ? String(value !== null && value !== void 0 ? value : "").length : uncontrolledLength;
+  var handleChange = function handleChange(e) {
+    var _e$target$value;
+    var val = (_e$target$value = e.target.value) !== null && _e$target$value !== void 0 ? _e$target$value : "";
+    if (!isControlled) setUncontrolledLength(val.length);
+    onChange === null || onChange === void 0 || onChange(e);
+  };
+  var handleClear = function handleClear(e) {
+    var _localRef$current, _localRef$current$foc;
+    e === null || e === void 0 || e.preventDefault();
+    if (isControlled) {
+      // controlled — notify parent
+      onChange === null || onChange === void 0 || onChange({
+        target: {
+          value: ""
+        }
+      });
+    } else if (localRef.current) {
+      localRef.current.value = "";
+      // update local state
+      setUncontrolledLength(0);
+    }
+    (_localRef$current = localRef.current) === null || _localRef$current === void 0 || (_localRef$current$foc = _localRef$current.focus) === null || _localRef$current$foc === void 0 || _localRef$current$foc.call(_localRef$current);
+    onClear === null || onClear === void 0 || onClear();
+  };
+  // padding logic: left and right padding depend on icons/buttons visible
+  var leftHasIcon = Boolean(icon && iconPosition === "left") || isSearch;
+  var rightHasIcon = Boolean(icon && iconPosition === "right") || isPassword || clearable && currentLength > 0;
+  var paddingClass = cn(leftHasIcon ? "pl-10" : "pl-3", rightHasIcon ? "pr-12" : "pr-3");
+  var baseClasses = cn("w-full rounded-md border bg-white text-sm placeholder-gray-400 disabled:opacity-50", "h-10 leading-10",
+  // consistent height
+  paddingClass, error ? "border-red-500 focus:ring-red-500" : "border-gray-300", success ? "border-green-500 focus:ring-green-500" : "", className);
+  var inputType = isPassword && showPassword ? "text" : type;
+  return jsxs("div", {
+    className: "w-full",
+    children: [label && jsxs("label", {
+      htmlFor: inputId,
+      className: "block text-sm font-medium mb-1",
+      children: [label, required && jsx("span", {
+        className: "text-error-500 ml-1",
+        children: "*"
+      })]
+    }), jsxs("div", {
+      className: "relative",
+      children: [leftHasIcon && jsx("div", {
+        className: "absolute left-3 top-1/2 transform -translate-y-1/2 pointer-events-none",
+        children: isSearch ? jsx(Search, {
+          className: "h-4 w-4 text-primary-400"
+        }) : jsx("span", {
+          className: "text-primary-400",
+          children: icon
+        })
+      }), jsx("input", _objectSpread2({
+        id: inputId,
+        ref: setRefs,
+        type: inputType,
+        className: baseClasses,
+        placeholder: placeholder,
+        disabled: disabled,
+        readOnly: readOnly,
+        "aria-invalid": !!error,
+        "aria-describedby": error ? "".concat(inputId, "-error") : success ? "".concat(inputId, "-success") : helperText ? "".concat(inputId, "-helper") : undefined,
+        maxLength: maxLength,
+        onChange: handleChange,
+        value: value,
+        defaultValue: defaultValue
+      }, rest)), icon && iconPosition === "right" && !isPassword && !(clearable && currentLength > 0) && jsx("div", {
+        className: "absolute right-3 top-1/2 transform -translate-y-1/2 pointer-events-none text-primary-400",
+        children: icon
+      }), isPassword && jsx("button", {
+        type: "button",
+        className: "absolute right-3 top-1/2 transform -translate-y-1/2 text-primary-500",
+        onClick: function onClick() {
+          return setShowPassword(function (s) {
+            return !s;
+          });
+        },
+        "aria-label": showPassword ? "Hide password" : "Show password",
+        disabled: disabled,
+        children: showPassword ? jsx(EyeOff, {
+          className: "h-4 w-4"
+        }) : jsx(Eye, {
+          className: "h-4 w-4"
+        })
+      }), clearable && currentLength > 0 && !isPassword && jsx("button", {
+        type: "button",
+        className: "absolute right-3 top-1/2 transform -translate-y-1/2 text-primary-500",
+        onClick: handleClear,
+        "aria-label": "Clear input",
+        disabled: disabled,
+        children: jsx(X, {
+          className: "h-4 w-4"
+        })
+      })]
+    }), error && jsx("p", {
+      id: "".concat(inputId, "-error"),
+      className: "mt-1 text-sm text-error-600",
+      "aria-live": "polite",
+      children: error
+    }), !error && success && jsx("p", {
+      id: "".concat(inputId, "-success"),
+      className: "mt-1 text-sm text-success-600",
+      "aria-live": "polite",
+      children: success
+    }), !error && !success && helperText && jsx("p", {
+      id: "".concat(inputId, "-helper"),
+      className: "mt-1 text-sm text-muted",
+      children: helperText
+    }), showCount && maxLength && jsxs("div", {
+      className: "mt-1 text-right text-xs text-primary-500",
+      "aria-hidden": true,
+      children: [currentLength, "/", maxLength]
+    })]
+  });
+});
+Input.displayName = "Input";
+
+export { Input as default };

package/dist/esm/components/core/Loader.js

@@ -0,0 +1,141 @@
+'use client';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { cn } from '../../utils/cn.js';
+
+var _excluded = ["size", "speed", "thickness", "color", "secondaryColor", "variant", "className", "inline", "ariaLabel", "text", "reverse", "style"];
+var sizeToPx = function sizeToPx(size) {
+  if (!size) return 24;
+  if (typeof size === "number") return size;
+  switch (size) {
+    case "sm":
+      return 14;
+    case "md":
+      return 20;
+    case "lg":
+      return 36;
+    default:
+      return 24;
+  }
+};
+var Loader = /*#__PURE__*/forwardRef(function Loader(_ref, ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "md" : _ref$size,
+    _ref$speed = _ref.speed,
+    speed = _ref$speed === void 0 ? 0.9 : _ref$speed,
+    _ref$thickness = _ref.thickness,
+    thickness = _ref$thickness === void 0 ? 2.5 : _ref$thickness,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? "currentColor" : _ref$color,
+    _ref$secondaryColor = _ref.secondaryColor,
+    secondaryColor = _ref$secondaryColor === void 0 ? "rgba(0,0,0,0.08)" : _ref$secondaryColor,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? "spinner" : _ref$variant,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className,
+    _ref$inline = _ref.inline,
+    inline = _ref$inline === void 0 ? false : _ref$inline,
+    _ref$ariaLabel = _ref.ariaLabel,
+    ariaLabel = _ref$ariaLabel === void 0 ? "Loading" : _ref$ariaLabel,
+    text = _ref.text,
+    _ref$reverse = _ref.reverse,
+    reverse = _ref$reverse === void 0 ? false : _ref$reverse,
+    style = _ref.style,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var px = sizeToPx(size);
+  var wrapperClass = cn(inline ? "inline-flex" : "flex", "items-center gap-2", className);
+  // animation attributes for SVG rotate
+  var animDur = "".concat(speed, "s");
+  var rotateFrom = reverse ? "360 12 12" : "0 12 12";
+  var rotateTo = reverse ? "0 12 12" : "360 12 12";
+  return jsxs("div", _objectSpread2(_objectSpread2({
+    ref: ref,
+    role: "progressbar",
+    "aria-label": ariaLabel,
+    className: wrapperClass,
+    style: style
+  }, rest), {}, {
+    children: [jsx("style", {
+      children: "\n        @keyframes loader-bounce {\n          0%, 80%, 100% { transform: translateY(0); opacity: 0.9 }\n          40% { transform: translateY(-6px); opacity: 1 }\n        }\n        @keyframes loader-bar {\n          0% { transform: translateX(-35%); }\n          100% { transform: translateX(135%); }\n        }\n      "
+    }), variant === "spinner" && jsxs("svg", {
+      width: px,
+      height: px,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      style: {
+        display: "block"
+      },
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [jsx("circle", {
+        cx: "12",
+        cy: "12",
+        r: 10 - thickness,
+        stroke: secondaryColor,
+        strokeWidth: thickness
+      }), jsx("path", {
+        d: "M22 12a10 10 0 0 0-10-10",
+        stroke: color,
+        strokeWidth: thickness,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeDasharray: "24",
+        children: jsx("animateTransform", {
+          attributeName: "transform",
+          attributeType: "XML",
+          type: "rotate",
+          from: rotateFrom,
+          to: rotateTo,
+          dur: animDur,
+          repeatCount: "indefinite"
+        })
+      })]
+    }), variant === "dots" && jsx("div", {
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: Math.max(2, Math.round(px / 8))
+      },
+      children: [0, 1, 2].map(function (i) {
+        return jsx("span", {
+          "aria-hidden": true,
+          style: {
+            width: px / 4,
+            height: px / 4,
+            borderRadius: "9999px",
+            display: "inline-block",
+            background: color,
+            animation: "loader-bounce ".concat(speed, "s ").concat(i * (speed / 6), "s infinite ease-in-out")
+          }
+        }, i);
+      })
+    }), variant === "bar" && jsx("div", {
+      "aria-hidden": true,
+      style: {
+        width: Math.max(72, px * 2.5),
+        height: Math.max(6, px / 6),
+        background: secondaryColor,
+        overflow: "hidden",
+        borderRadius: 9999,
+        position: "relative"
+      },
+      children: jsx("div", {
+        style: {
+          position: "absolute",
+          left: 0,
+          top: 0,
+          bottom: 0,
+          width: "35%",
+          background: "linear-gradient(90deg, ".concat(color, ", ").concat(secondaryColor, ")"),
+          transform: "translateX(-35%)",
+          animation: "loader-bar ".concat(speed, "s linear infinite")
+        }
+      })
+    }), text && jsx("span", {
+      className: "text-sm text-primary-500",
+      children: text
+    })]
+  }));
+});
+
+export { Loader as default };

package/dist/esm/components/core/LocationPicker.js

@@ -0,0 +1,161 @@
+'use client';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { forwardRef, useState, cloneElement } from 'react';
+import { cn } from '../../utils/cn.js';
+
+var _excluded = ["value", "onChange", "inputProps", "icon", "iconProps", "iconPosition", "placeholder", "className"];
+function formatCoords(coords) {
+  if (!coords) return "";
+  var lat = Number(coords.lat);
+  var lng = Number(coords.lng);
+  if (!isFinite(lat) || !isFinite(lng)) return "";
+  return "".concat(lat.toFixed(6), ", ").concat(lng.toFixed(6));
+}
+function parseCoords(str) {
+  if (!str || typeof str !== "string") return null;
+  var parts = str.split(",").map(function (p) {
+    return p.trim();
+  }).filter(Boolean);
+  if (parts.length < 2) return null;
+  var lat = parseFloat(parts[0]);
+  var lng = parseFloat(parts[1]);
+  if (!isFinite(lat) || !isFinite(lng)) return null;
+  return {
+    lat: lat,
+    lng: lng
+  };
+}
+var LocationPicker = /*#__PURE__*/forwardRef(function LocationPicker(_ref, ref) {
+  var _ref$value = _ref.value,
+    value = _ref$value === void 0 ? null : _ref$value,
+    onChange = _ref.onChange,
+    _ref$inputProps = _ref.inputProps,
+    inputProps = _ref$inputProps === void 0 ? {} : _ref$inputProps,
+    _ref$icon = _ref.icon,
+    icon = _ref$icon === void 0 ? null : _ref$icon,
+    _ref$iconProps = _ref.iconProps,
+    iconProps = _ref$iconProps === void 0 ? {} : _ref$iconProps,
+    _ref$iconPosition = _ref.iconPosition,
+    iconPosition = _ref$iconPosition === void 0 ? "right" : _ref$iconPosition,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? "lat, lng" : _ref$placeholder,
+    className = _ref.className,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(function () {
+      return formatCoords(value);
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    text = _useState2[0],
+    setText = _useState2[1];
+  // Re-sync the text when the external `value` changes (adjust-during-render
+  // pattern, avoids a cascading effect render).
+  var _useState3 = useState(value),
+    _useState4 = _slicedToArray(_useState3, 2),
+    prevValue = _useState4[0],
+    setPrevValue = _useState4[1];
+  if (value !== prevValue) {
+    setPrevValue(value);
+    setText(formatCoords(value));
+  }
+  var handleInputChange = function handleInputChange(e) {
+    var newText = e.target.value;
+    setText(newText);
+    if (typeof inputProps.onChange === "function") {
+      try {
+        inputProps.onChange(e);
+      } catch (_unused) {
+        // ignore errors thrown by consumer handlers
+      }
+    }
+    var parsed = parseCoords(newText);
+    if (parsed && typeof onChange === "function") onChange(parsed);else if (newText.trim() === "" && typeof onChange === "function") onChange(null);
+  };
+  var handleGeoSuccess = function handleGeoSuccess(position) {
+    var coords = {
+      lat: Number(position.coords.latitude),
+      lng: Number(position.coords.longitude)
+    };
+    setText(formatCoords(coords));
+    if (typeof onChange === "function") onChange(coords);
+  };
+  var handleGeoError = function handleGeoError(err) {
+    console.error("LocationPicker geolocation error:", err);
+  };
+  var handleIconClick = function handleIconClick(e) {
+    var _navigator;
+    if (!((_navigator = navigator) !== null && _navigator !== void 0 && _navigator.geolocation)) {
+      console.error("LocationPicker: geolocation not supported in this browser");
+      if (typeof iconProps.onClick === "function") {
+        try {
+          iconProps.onClick(e);
+        } catch (_unused2) {
+          // ignore errors thrown by consumer handlers
+        }
+      }
+      return;
+    }
+    navigator.geolocation.getCurrentPosition(handleGeoSuccess, handleGeoError, {
+      enableHighAccuracy: true,
+      timeout: 10000
+    });
+    if (typeof iconProps.onClick === "function") {
+      try {
+        iconProps.onClick(e);
+      } catch (_unused3) {
+        // ignore errors thrown by consumer handlers
+      }
+    }
+  };
+  var DefaultIcon = jsxs("svg", {
+    className: "w-4 h-4",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": "true",
+    children: [jsx("path", {
+      d: "M12 2C8.686 2 6 4.686 6 8c0 5.25 6 12 6 12s6-6.75 6-12c0-3.314-2.686-6-6-6z",
+      stroke: "currentColor",
+      strokeWidth: "1.2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), jsx("circle", {
+      cx: "12",
+      cy: "8",
+      r: "2.2",
+      stroke: "currentColor",
+      strokeWidth: "1.2"
+    })]
+  });
+  var iconButton = jsx("button", _objectSpread2(_objectSpread2({
+    type: "button",
+    onClick: handleIconClick
+  }, iconProps), {}, {
+    "aria-label": iconProps["aria-label"] || "Use my location",
+    className: "inline-flex items-center justify-center p-1 focus:outline-none ".concat(iconProps.className || ""),
+    children: icon ? /*#__PURE__*/React.isValidElement(icon) ? /*#__PURE__*/cloneElement(icon) : icon : DefaultIcon
+  }));
+  var inputPaddingClass = iconPosition === "right" ? "pr-10" : "pl-10";
+  return jsx("div", _objectSpread2(_objectSpread2({
+    className: cn("inline-flex items-center", className)
+  }, rest), {}, {
+    children: jsxs("div", {
+      className: "relative",
+      children: [jsx("input", _objectSpread2(_objectSpread2({
+        ref: ref,
+        type: "text",
+        placeholder: placeholder
+      }, inputProps), {}, {
+        value: text,
+        onChange: handleInputChange,
+        className: cn("min-w-[200px] rounded-md border border-gray-300 bg-white py-2 px-3 text-sm placeholder-gray-400 shadow-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500", inputProps.className, inputPaddingClass)
+      })), jsx("div", {
+        className: cn("absolute inset-y-0 flex items-center", iconPosition === "right" ? "right-2" : "left-2"),
+        children: iconButton
+      })]
+    })
+  }));
+});
+LocationPicker.displayName = "LocationPicker";
+
+export { LocationPicker as default };

package/dist/esm/components/core/Popover.js

@@ -0,0 +1,171 @@
+'use client';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import React, { useRef, useId, useCallback, useEffect, useLayoutEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { cn } from '../../utils/cn.js';
+import { setRefs, computePosition } from '../../utils/position.js';
+import { useFocusTrap, getFocusable } from '../../hooks/useFocusTrap.js';
+import { useControllableState } from '../../hooks/useControllableState.js';
+
+var _excluded = ["trigger", "children", "open", "defaultOpen", "onOpenChange", "placement", "offset", "title", "initialFocusRef", "disabled", "id", "className"];
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+function usePopoverPosition(open, anchorRef, panelRef, placement, offset) {
+  useIsomorphicLayoutEffect(function () {
+    if (!open) return undefined;
+    var update = function update() {
+      var _anchorRef$current;
+      var anchor = ((_anchorRef$current = anchorRef.current) === null || _anchorRef$current === void 0 ? void 0 : _anchorRef$current.firstElementChild) || anchorRef.current;
+      var panel = panelRef.current;
+      if (!anchor || !panel) return;
+      var size = {
+        width: panel.offsetWidth,
+        height: panel.offsetHeight
+      };
+      var _computePosition = computePosition(anchor.getBoundingClientRect(), size, {
+          placement: placement,
+          offset: offset
+        }),
+        top = _computePosition.top,
+        left = _computePosition.left,
+        side = _computePosition.side;
+      panel.style.top = "".concat(top, "px");
+      panel.style.left = "".concat(left, "px");
+      panel.setAttribute("data-side", side);
+    };
+    update();
+    window.addEventListener("resize", update);
+    window.addEventListener("scroll", update, true);
+    return function () {
+      window.removeEventListener("resize", update);
+      window.removeEventListener("scroll", update, true);
+    };
+  }, [open, placement, offset, anchorRef, panelRef]);
+}
+function useOutsideClose(open, anchorRef, panelRef, close) {
+  useEffect(function () {
+    if (!open) return undefined;
+    var onDown = function onDown(e) {
+      var _panelRef$current, _anchorRef$current2;
+      if ((_panelRef$current = panelRef.current) !== null && _panelRef$current !== void 0 && _panelRef$current.contains(e.target) || (_anchorRef$current2 = anchorRef.current) !== null && _anchorRef$current2 !== void 0 && _anchorRef$current2.contains(e.target)) return;
+      close();
+    };
+    document.addEventListener("mousedown", onDown);
+    document.addEventListener("touchstart", onDown);
+    return function () {
+      document.removeEventListener("mousedown", onDown);
+      document.removeEventListener("touchstart", onDown);
+    };
+  }, [open, anchorRef, panelRef, close]);
+}
+var Popover = /*#__PURE__*/React.forwardRef(function (_ref, _ref2) {
+  var _triggerElement$props;
+  var trigger = _ref.trigger,
+    children = _ref.children,
+    openProp = _ref.open,
+    _ref$defaultOpen = _ref.defaultOpen,
+    defaultOpen = _ref$defaultOpen === void 0 ? false : _ref$defaultOpen,
+    onOpenChange = _ref.onOpenChange,
+    _ref$placement = _ref.placement,
+    placement = _ref$placement === void 0 ? "bottom-start" : _ref$placement,
+    _ref$offset = _ref.offset,
+    offset = _ref$offset === void 0 ? 8 : _ref$offset,
+    title = _ref.title,
+    initialFocusRef = _ref.initialFocusRef,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    idProp = _ref.id,
+    className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var anchorRef = useRef(null);
+  var panelRef = useRef(null);
+  var reactId = useId();
+  var panelId = idProp || "popover-".concat(reactId);
+  var titleId = "".concat(panelId, "-title");
+  var _useControllableState = useControllableState({
+      value: openProp,
+      defaultValue: defaultOpen,
+      onChange: onOpenChange
+    }),
+    _useControllableState2 = _slicedToArray(_useControllableState, 2),
+    open = _useControllableState2[0],
+    setOpen = _useControllableState2[1];
+  var close = useCallback(function () {
+    return setOpen(false);
+  }, [setOpen]);
+  var focusTrigger = function focusTrigger() {
+    var _getFocusable$;
+    return (_getFocusable$ = getFocusable(anchorRef.current)[0]) === null || _getFocusable$ === void 0 ? void 0 : _getFocusable$.focus();
+  };
+  usePopoverPosition(open, anchorRef, panelRef, placement, offset);
+  useOutsideClose(open, anchorRef, panelRef, close);
+  useFocusTrap(panelRef, {
+    active: open,
+    trap: false,
+    initialFocusRef: initialFocusRef,
+    onEscape: function onEscape() {
+      close();
+      focusTrigger();
+    }
+  });
+  // Non-modal: tabbing past either end leaves the popover and closes it, with
+  // focus continuing from the trigger as if the panel sat right after it.
+  var handlePanelKeyDown = function handlePanelKeyDown(e) {
+    if (e.key !== "Tab") return;
+    var items = getFocusable(panelRef.current);
+    var atStart = !items.length || document.activeElement === items[0] || document.activeElement === panelRef.current;
+    var atEnd = !items.length || document.activeElement === items[items.length - 1];
+    if (e.shiftKey && atStart) {
+      e.preventDefault();
+      close();
+      focusTrigger();
+    } else if (!e.shiftKey && atEnd) {
+      close();
+      focusTrigger();
+    }
+  };
+  var triggerElement = /*#__PURE__*/React.isValidElement(trigger) ? trigger : jsx("button", {
+    type: "button",
+    children: trigger
+  });
+  var triggerNode = /*#__PURE__*/React.cloneElement(triggerElement, {
+    "aria-haspopup": "dialog",
+    "aria-expanded": open,
+    "aria-controls": open ? panelId : undefined,
+    disabled: (_triggerElement$props = triggerElement.props.disabled) !== null && _triggerElement$props !== void 0 ? _triggerElement$props : disabled,
+    onClick: function onClick(e) {
+      var _triggerElement$props2, _triggerElement$props3;
+      (_triggerElement$props2 = (_triggerElement$props3 = triggerElement.props).onClick) === null || _triggerElement$props2 === void 0 || _triggerElement$props2.call(_triggerElement$props3, e);
+      if (!e.defaultPrevented && !disabled) setOpen(!open);
+    }
+  });
+  var content = typeof children === "function" ? children({
+    close: close
+  }) : children;
+  return jsxs(Fragment, {
+    children: [jsx("span", {
+      ref: anchorRef,
+      className: "inline-flex",
+      children: triggerNode
+    }), open && typeof document !== "undefined" && /*#__PURE__*/createPortal(jsxs("div", _objectSpread2(_objectSpread2({
+      ref: function ref(node) {
+        return setRefs(node, panelRef, _ref2);
+      },
+      id: panelId,
+      role: "dialog",
+      "aria-labelledby": title ? titleId : undefined,
+      tabIndex: -1,
+      onKeyDown: handlePanelKeyDown,
+      className: cn("fixed left-0 top-0 z-50 min-w-[12rem] max-w-sm rounded-lg border border-gray-200 bg-white p-4 text-sm text-gray-900 shadow-lg focus:outline-none", "dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100", "animate-fade-in motion-reduce:animate-none", className)
+    }, props), {}, {
+      children: [title && jsx("h2", {
+        id: titleId,
+        className: "mb-2 text-sm font-semibold",
+        children: title
+      }), content]
+    })), document.body)]
+  });
+});
+Popover.displayName = "Popover";
+
+export { Popover as default };