@roy-ui/ui 0.0.7 → 0.0.9

package/dist/chunk-C5X3TE5U.js

@@ -0,0 +1,87 @@
+"use client";
+import { useState, useRef, useEffect } from 'react';
+import './Popover-LSYVKT4M.css';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/components/popover/Popover.tsx
+var InfoIcon = () => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": true,
+    children: [
+      /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "9" }),
+      /* @__PURE__ */ jsx("path", { d: "M12 16v-5M12 8h.01" })
+    ]
+  }
+);
+function Popover({
+  children,
+  title,
+  align = "right",
+  width = "md",
+  label = "Open menu",
+  defaultOpen = false,
+  renderTrigger
+}) {
+  const [open, setOpen] = useState(defaultOpen);
+  const wrap = useRef(null);
+  const toggle = () => setOpen((o) => !o);
+  useEffect(() => {
+    if (!open) return;
+    function onDown(e) {
+      if (wrap.current && !wrap.current.contains(e.target)) {
+        setOpen(false);
+      }
+    }
+    function onKey(e) {
+      if (e.key === "Escape") setOpen(false);
+    }
+    document.addEventListener("mousedown", onDown);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("mousedown", onDown);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+  const trigger = renderTrigger ? renderTrigger({ isOpen: open, toggle }) : /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: toggle,
+      "aria-label": label,
+      "aria-expanded": open,
+      className: `royui-popover__trigger ${open ? "royui-popover__trigger--on" : ""}`,
+      children: /* @__PURE__ */ jsx(InfoIcon, {})
+    }
+  );
+  const widthClass = typeof width === "string" ? `royui-popover__panel--${width}` : "";
+  const customWidth = typeof width === "number" ? { width: `${width}px` } : void 0;
+  const alignClass = `royui-popover__panel--${align}`;
+  return /* @__PURE__ */ jsxs("div", { ref: wrap, className: "royui-popover", children: [
+    trigger,
+    open && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `royui-popover__panel ${widthClass} ${alignClass}`,
+        style: customWidth,
+        role: "dialog",
+        children: [
+          title && /* @__PURE__ */ jsx("div", { className: "royui-popover__title", children: title }),
+          /* @__PURE__ */ jsx("div", { className: "royui-popover__body", children })
+        ]
+      }
+    )
+  ] });
+}
+
+export { Popover };
+//# sourceMappingURL=chunk-C5X3TE5U.js.map
+//# sourceMappingURL=chunk-C5X3TE5U.js.map

package/dist/chunk-C5X3TE5U.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/popover/Popover.tsx"],"names":[],"mappings":"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","file":"chunk-C5X3TE5U.js","sourcesContent":["'use client';\n\nimport {\n  useEffect,\n  useRef,\n  useState,\n  type ReactNode,\n} from 'react';\nimport './Popover.css';\n\nexport interface PopoverProps {\n  children: ReactNode;\n  title?: string;\n  align?: 'left' | 'right';\n  width?: 'sm' | 'md' | 'lg' | number;\n  label?: string;\n  defaultOpen?: boolean;\n  renderTrigger?: (api: { isOpen: boolean; toggle: () => void }) => ReactNode;\n}\n\nconst InfoIcon = () => (\n  <svg\n    width=\"14\"\n    height=\"14\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"1.5\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    aria-hidden\n  >\n    <circle cx=\"12\" cy=\"12\" r=\"9\" />\n    <path d=\"M12 16v-5M12 8h.01\" />\n  </svg>\n);\n\nexport function Popover({\n  children,\n  title,\n  align = 'right',\n  width = 'md',\n  label = 'Open menu',\n  defaultOpen = false,\n  renderTrigger,\n}: PopoverProps) {\n  const [open, setOpen] = useState(defaultOpen);\n  const wrap = useRef<HTMLDivElement>(null);\n  const toggle = () => setOpen((o) => !o);\n\n  useEffect(() => {\n    if (!open) return;\n    function onDown(e: MouseEvent) {\n      if (wrap.current && !wrap.current.contains(e.target as Node)) {\n        setOpen(false);\n      }\n    }\n    function onKey(e: KeyboardEvent) {\n      if (e.key === 'Escape') setOpen(false);\n    }\n    document.addEventListener('mousedown', onDown);\n    document.addEventListener('keydown', onKey);\n    return () => {\n      document.removeEventListener('mousedown', onDown);\n      document.removeEventListener('keydown', onKey);\n    };\n  }, [open]);\n\n  const trigger = renderTrigger ? (\n    renderTrigger({ isOpen: open, toggle })\n  ) : (\n    <button\n      type=\"button\"\n      onClick={toggle}\n      aria-label={label}\n      aria-expanded={open}\n      className={`royui-popover__trigger ${open ? 'royui-popover__trigger--on' : ''}`}\n    >\n      <InfoIcon />\n    </button>\n  );\n\n  const widthClass =\n    typeof width === 'string' ? `royui-popover__panel--${width}` : '';\n  const customWidth =\n    typeof width === 'number' ? { width: `${width}px` } : undefined;\n  const alignClass = `royui-popover__panel--${align}`;\n\n  return (\n    <div ref={wrap} className=\"royui-popover\">\n      {trigger}\n      {open && (\n        <div\n          className={`royui-popover__panel ${widthClass} ${alignClass}`}\n          style={customWidth}\n          role=\"dialog\"\n        >\n          {title && <div className=\"royui-popover__title\">{title}</div>}\n          <div className=\"royui-popover__body\">{children}</div>\n        </div>\n      )}\n    </div>\n  );\n}\n"]}