@crewlethq/ui 0.2.0 → 0.3.0

package/dist/chunk-D3OADIM6.js

@@ -0,0 +1,112 @@
+import { useClipboard } from './chunk-V663QU4R.js';
+import { IconButton } from './chunk-F27EPQ7D.js';
+import { Button } from './chunk-BZYDZBAN.js';
+import { VisuallyHidden } from './chunk-BZFWDIV6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './Copyable-5PNRFOLS.css';
+import { useCallback } from 'react';
+import { CheckGlyph, ErrorGlyph, ContentCopyGlyph } from '@crewlethq/icons/glyphs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function copyGlyph(state) {
+  if (state === "copied") return /* @__PURE__ */ jsx(CheckGlyph, { size: "sm" });
+  if (state === "failed") return /* @__PURE__ */ jsx(ErrorGlyph, { size: "sm" });
+  return /* @__PURE__ */ jsx(ContentCopyGlyph, { size: "sm" });
+}
+function CopyStatus({ state, copiedMessage, failedMessage }) {
+  return /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx("span", { role: "status", children: state === "copied" ? copiedMessage : state === "failed" ? failedMessage : "" }) });
+}
+function CopyButton({
+  text,
+  label = "Copy",
+  copiedLabel = "Copied",
+  failedLabel = "Copy failed",
+  copiedMessage = "copied to the clipboard",
+  failedMessage = "the browser refused the clipboard",
+  size = "small",
+  variant = "tertiary",
+  title,
+  className
+}) {
+  const { state, copy } = useClipboard();
+  const onClick = useCallback(() => {
+    void copy(text);
+  }, [copy, text]);
+  return /* @__PURE__ */ jsxs("span", { className, children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        size,
+        variant,
+        leadingIcon: copyGlyph(state),
+        onClick,
+        title: state === "failed" ? failedMessage : title,
+        children: state === "copied" ? copiedLabel : state === "failed" ? failedLabel : label
+      }
+    ),
+    /* @__PURE__ */ jsx(CopyStatus, { state, copiedMessage, failedMessage })
+  ] });
+}
+var truncateValue = (text, length, variant) => {
+  if (text.length <= length) return text;
+  if (variant === "chip") {
+    const head = Math.max(4, length - 5);
+    const tail = Math.min(4, Math.max(2, length - head - 1));
+    return `${text.slice(0, head)}\u2026${text.slice(-tail)}`;
+  }
+  return `${text.slice(0, length)}\u2026`;
+};
+var Copyable = ({
+  value,
+  display,
+  variant = "chip",
+  monospace = false,
+  truncate = false,
+  truncateLength,
+  ariaLabel = "Copy to clipboard",
+  title = "Copy",
+  copiedMessage = "copied to the clipboard",
+  failedMessage = "the browser refused the clipboard",
+  className
+}) => {
+  const text = value === void 0 || value === null ? "" : String(value);
+  const { state, copy } = useClipboard();
+  const onCopy = useCallback(() => {
+    void copy(text);
+  }, [copy, text]);
+  if (!text) return null;
+  const resolvedLength = truncateLength ?? (variant === "chip" ? 14 : 24);
+  const shouldTruncate = truncate || variant === "chip" && text.length > resolvedLength;
+  const rendered = display ?? (shouldTruncate ? truncateValue(text, resolvedLength, variant) : text);
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cx(
+        "crewlet-copyable",
+        `crewlet-copyable--${variant}`,
+        monospace && "crewlet-copyable--monospace",
+        state === "copied" && "is-copied",
+        state === "failed" && "is-failed",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "crewlet-copyable__value", title: text, children: rendered }),
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            className: "crewlet-copyable__button",
+            label: ariaLabel,
+            title: state === "failed" ? failedMessage : title,
+            size: "sm",
+            variant: "ghost",
+            icon: copyGlyph(state),
+            onClick: onCopy
+          }
+        ),
+        /* @__PURE__ */ jsx(CopyStatus, { state, copiedMessage, failedMessage })
+      ]
+    }
+  );
+};
+
+export { CopyButton, Copyable };

package/dist/chunk-DD5BBGBE.js

@@ -0,0 +1,162 @@
+import { useLayerContainer, viewportBounds, LAYER_GAP, outsideBounds, placePopup, LAYER_REPOSITION_EVENT } from './chunk-7RPGY3JE.js';
+import { usePopupLayer, focusables } from './chunk-ITHXJHBB.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './Popover-WJGCF3ZQ.css';
+import { useId, useState, useRef, useCallback, useLayoutEffect, useEffect, cloneElement } from 'react';
+import { createPortal } from 'react-dom';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function Popover({
+  trigger,
+  children,
+  align = "start",
+  side = "bottom",
+  width = "auto",
+  role = "dialog",
+  label,
+  className,
+  open: controlled,
+  defaultOpen = false,
+  onOpenChange
+}) {
+  const id = useId();
+  const panelId = `${id}-popover`;
+  const [uncontrolled, setUncontrolled] = useState(defaultOpen);
+  const open = controlled ?? uncontrolled;
+  const anchor = useRef(null);
+  const panel = useRef(null);
+  const [place, setPlace] = useState(null);
+  const container = useLayerContainer();
+  const isControlled = useRef(controlled !== void 0);
+  const report = useRef(onOpenChange);
+  isControlled.current = controlled !== void 0;
+  report.current = onOpenChange;
+  const setOpen = useCallback((next, reason) => {
+    if (!isControlled.current) setUncontrolled(next);
+    report.current?.(next, reason);
+  }, []);
+  const close = useCallback(
+    (reason) => {
+      if (reason === "escape" || reason === "tab") anchor.current?.focus();
+      setOpen(false, reason);
+    },
+    [setOpen]
+  );
+  const layer = usePopupLayer({ open, onDismiss: close });
+  const position = useCallback(() => {
+    const at = anchor.current;
+    const box = panel.current;
+    if (!at || !box || !container) return;
+    const inHost = container !== document.body;
+    const host = inHost ? container.getBoundingClientRect() : viewportBounds();
+    const rect = at.getBoundingClientRect();
+    const own = box.getBoundingClientRect();
+    const panelWidth = width === "match" ? rect.width : own.width;
+    const local = {
+      x: (align === "end" ? rect.right - panelWidth : rect.left) - (inHost ? host.x : 0),
+      y: rect.top - (inHost ? host.y : 0),
+      width: rect.width,
+      height: rect.height
+    };
+    const whole = { x: 0, y: 0, width: host.width, height: host.height };
+    const bounds = {
+      x: LAYER_GAP,
+      y: LAYER_GAP,
+      width: host.width - 2 * LAYER_GAP,
+      height: host.height - 2 * LAYER_GAP
+    };
+    if (outsideBounds(local, whole)) {
+      close("anchor-gone");
+      return;
+    }
+    const spot = placePopup(
+      local,
+      { width: panelWidth, height: own.height },
+      bounds,
+      LAYER_GAP,
+      side === "top" ? "above" : "below"
+    );
+    setPlace(
+      (was) => was && was.left === spot.left && was.top === spot.top && was.side === spot.side && was.width === panelWidth ? was : { left: spot.left, top: spot.top, side: spot.side, width: width === "match" ? panelWidth : void 0 }
+    );
+  }, [align, close, container, side, width]);
+  useLayoutEffect(() => {
+    if (!open) return;
+    position();
+    const onLayout = () => position();
+    container?.addEventListener(LAYER_REPOSITION_EVENT, onLayout);
+    window.addEventListener("resize", onLayout);
+    window.addEventListener("scroll", onLayout, true);
+    return () => {
+      container?.removeEventListener(LAYER_REPOSITION_EVENT, onLayout);
+      window.removeEventListener("resize", onLayout);
+      window.removeEventListener("scroll", onLayout, true);
+    };
+  }, [open, container, position]);
+  useEffect(() => {
+    if (!open) setPlace(null);
+  }, [open]);
+  const placed = open && place !== null;
+  useEffect(() => {
+    if (!placed || role !== "dialog") return;
+    const box = panel.current;
+    if (box && !box.contains(document.activeElement)) (focusables(box)[0] ?? box).focus();
+  }, [placed, role]);
+  const toggle = useCallback(() => {
+    if (open) close("trigger");
+    else setOpen(true, "trigger");
+  }, [close, open, setOpen]);
+  const triggerEl = trigger(open, toggle);
+  const haspopup = role === "none" ? void 0 : role;
+  const anchored = cloneElement(triggerEl, {
+    ref: (el) => {
+      anchor.current = el;
+      layer.insideRef(el);
+    },
+    "aria-expanded": open,
+    "aria-haspopup": triggerEl.props["aria-haspopup"] ?? haspopup,
+    "aria-controls": open ? panelId : void 0
+  });
+  function onKeyDown(event) {
+    if (event.key !== "Escape" && event.key !== "Tab" && !event.ctrlKey && !event.metaKey && !event.altKey) {
+      event.stopPropagation();
+    }
+  }
+  const style = place ? { left: place.left, top: place.top, width: place.width } : (
+    // Not `display: none`: the panel has to be laid out for its own size to
+    // be measurable, and a browser refuses focus to a hidden element, which
+    // is what stops focus arriving at a corner.
+    { visibility: "hidden" }
+  );
+  const panelNode = open ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: (el) => {
+        panel.current = el;
+        layer.panelRef(el);
+      },
+      id: panelId,
+      className: cx(
+        "crewlet-popover",
+        `crewlet-popover--${place?.side ?? (side === "top" ? "above" : "below")}`,
+        container !== null && container !== document.body ? "crewlet-popover--in-host" : "crewlet-popover--fixed",
+        className
+      ),
+      style: { ...style, zIndex: layer.zIndex },
+      role: role === "none" ? void 0 : role,
+      "aria-label": role === "none" ? void 0 : label,
+      "aria-modal": role === "dialog" ? false : void 0,
+      tabIndex: role === "dialog" ? -1 : void 0,
+      onKeyDown,
+      onPointerDown: (event) => event.stopPropagation(),
+      onClick: (event) => event.stopPropagation(),
+      children: typeof children === "function" ? children(() => close("content")) : children
+    }
+  ) : null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    anchored,
+    panelNode && container ? createPortal(panelNode, container) : null
+  ] });
+}
+
+export { Popover };