@crewlethq/ui 0.2.0 → 0.4.0

package/dist/chunk-XDTYBF2F.js

@@ -0,0 +1,36 @@
+import { useState, useEffect, useCallback } from 'react';
+
+// src/Fullscreen/useFullscreen.ts
+function fullscreenSupported() {
+  return typeof document !== "undefined" && document.fullscreenEnabled === true && typeof Element.prototype.requestFullscreen === "function";
+}
+function useFullscreen(ref) {
+  const [supported] = useState(fullscreenSupported);
+  const [active, setActive] = useState(false);
+  useEffect(() => {
+    if (!supported) return;
+    const read = () => setActive(document.fullscreenElement === ref.current);
+    read();
+    document.addEventListener("fullscreenchange", read);
+    return () => document.removeEventListener("fullscreenchange", read);
+  }, [supported, ref]);
+  const enter = useCallback(() => {
+    const element = ref.current;
+    if (!element || !supported || document.fullscreenElement === element) return;
+    void element.requestFullscreen().catch(() => {
+    });
+  }, [ref, supported]);
+  const exit = useCallback(() => {
+    if (typeof document === "undefined" || document.fullscreenElement !== ref.current) return;
+    if (typeof document.exitFullscreen !== "function") return;
+    void document.exitFullscreen().catch(() => {
+    });
+  }, [ref]);
+  const toggle = useCallback(() => {
+    if (document.fullscreenElement === ref.current) exit();
+    else enter();
+  }, [enter, exit, ref]);
+  return { supported, active, enter, exit, toggle };
+}
+
+export { useFullscreen };

package/dist/chunk-XN4JBAN3.js

@@ -0,0 +1,32 @@
+import { cx } from './chunk-ODEQTPFM.js';
+import './DescriptionList-YYY3V3O6.css';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function DescriptionList({
+  dense = false,
+  items,
+  className,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs(
+    "dl",
+    {
+      ...rest,
+      className: cx("crewlet-description-list", dense && "crewlet-description-list--dense", className),
+      children: [
+        items?.map(([term, detail], index) => /* @__PURE__ */ jsx(DescriptionListItem, { term, children: detail }, index)),
+        children
+      ]
+    }
+  );
+}
+function DescriptionListItem({ term, className, children, ...rest }) {
+  return /* @__PURE__ */ jsxs("div", { ...rest, className: cx("crewlet-description-list__pair", className), children: [
+    /* @__PURE__ */ jsx("dt", { className: "crewlet-description-list__term", children: term }),
+    /* @__PURE__ */ jsx("dd", { className: "crewlet-description-list__detail", children })
+  ] });
+}
+DescriptionList.Item = DescriptionListItem;
+
+export { DescriptionList, DescriptionListItem };

package/dist/chunk-XV6WRMBC.js

@@ -0,0 +1,211 @@
+import { useLayerContainer, viewportBounds, LAYER_GAP, outsideBounds, placePopup, LAYER_REPOSITION_EVENT } from './chunk-7RPGY3JE.js';
+import { usePopupLayer } from './chunk-ITHXJHBB.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './Tooltip-LKQF7CE4.css';
+import { useId, useState, useRef, useCallback, useEffect, useLayoutEffect, cloneElement } from 'react';
+import { createPortal } from 'react-dom';
+import { motion } from '@crewlethq/tokens';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function ms(value) {
+  return Number.parseFloat(value);
+}
+function attach(ref, el) {
+  if (typeof ref === "function") {
+    const release = ref(el);
+    return typeof release === "function" ? release : () => void ref(null);
+  }
+  if (!ref) return () => {
+  };
+  const box = ref;
+  box.current = el;
+  return () => {
+    box.current = null;
+  };
+}
+var OPEN_DELAY = ms(motion.duration.slow);
+var CLOSE_DELAY = ms(motion.duration.base);
+function Tooltip({
+  content,
+  placement = "top",
+  disabled = false,
+  openDelay = OPEN_DELAY,
+  closeDelay = CLOSE_DELAY,
+  className,
+  children
+}) {
+  const id = useId();
+  const panelId = `${id}-tooltip`;
+  const [open, setOpen] = useState(false);
+  const anchor = useRef(null);
+  const panel = useRef(null);
+  const timer = useRef(void 0);
+  const over = useRef({ pointer: false, focus: false });
+  const [place, setPlace] = useState(null);
+  const container = useLayerContainer();
+  const clear = useCallback(() => {
+    if (timer.current !== void 0) clearTimeout(timer.current);
+    timer.current = void 0;
+  }, []);
+  const show = useCallback(
+    (delay) => {
+      clear();
+      if (disabled) return;
+      if (delay <= 0) {
+        setOpen(true);
+        return;
+      }
+      timer.current = setTimeout(() => setOpen(true), delay);
+    },
+    [clear, disabled]
+  );
+  const hide = useCallback(
+    (delay) => {
+      clear();
+      const leave = () => {
+        if (over.current.pointer || over.current.focus) return;
+        setOpen(false);
+      };
+      if (delay <= 0) {
+        leave();
+        return;
+      }
+      timer.current = setTimeout(leave, delay);
+    },
+    [clear]
+  );
+  const layer = usePopupLayer({ open, onDismiss: () => {
+    over.current = { pointer: false, focus: false };
+    clear();
+    setOpen(false);
+  } });
+  useEffect(() => clear, [clear]);
+  useEffect(() => {
+    if (disabled) {
+      clear();
+      setOpen(false);
+    }
+  }, [disabled, clear]);
+  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 local = {
+      x: rect.x + rect.width / 2 - own.width / 2 - (inHost ? host.x : 0),
+      y: rect.y - (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, x: rect.x - (inHost ? host.x : 0) }, whole)) {
+      setOpen(false);
+      return;
+    }
+    const spot = placePopup(local, { width: own.width, height: own.height }, bounds, LAYER_GAP, placement === "top" ? "above" : "below");
+    setPlace(
+      (was) => was && was.left === spot.left && was.top === spot.top && was.side === spot.side ? was : spot
+    );
+  }, [container, placement]);
+  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 child = children;
+  const describedBy = child.props["aria-describedby"];
+  const ownRef = child.props["ref"];
+  const trigger = cloneElement(child, {
+    ref: (el) => {
+      anchor.current = el;
+      layer.insideRef(el);
+      const release = attach(ownRef, el);
+      return () => {
+        anchor.current = null;
+        layer.insideRef(null);
+        release();
+      };
+    },
+    "aria-describedby": open ? cx(describedBy, panelId) : describedBy,
+    onPointerEnter: (event) => {
+      over.current.pointer = true;
+      show(openDelay);
+      child.props["onPointerEnter"]?.(event);
+    },
+    onPointerLeave: (event) => {
+      over.current.pointer = false;
+      hide(closeDelay);
+      child.props["onPointerLeave"]?.(event);
+    },
+    // Focus opens with NO delay: a keyboard reader who reached this control
+    // asked for it, and there is no pointer passing over anything.
+    onFocus: (event) => {
+      over.current.focus = true;
+      show(0);
+      child.props["onFocus"]?.(event);
+    },
+    onBlur: (event) => {
+      over.current.focus = false;
+      hide(0);
+      child.props["onBlur"]?.(event);
+    }
+  });
+  const style = place ? { left: place.left, top: place.top, zIndex: layer.zIndex } : (
+    // Laid out but not painted: the panel has to have a size before it can be
+    // placed, and a panel drawn at the layer's corner for one frame is a flash.
+    { visibility: "hidden", zIndex: layer.zIndex }
+  );
+  const panelNode = open ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: (el) => {
+        panel.current = el;
+        layer.panelRef(el);
+      },
+      id: panelId,
+      role: "tooltip",
+      className: cx(
+        "crewlet-tooltip",
+        `crewlet-tooltip--${place?.side ?? (placement === "top" ? "above" : "below")}`,
+        container !== null && container !== document.body ? "crewlet-tooltip--in-host" : "crewlet-tooltip--fixed",
+        className
+      ),
+      style,
+      onPointerEnter: () => {
+        over.current.pointer = true;
+        clear();
+      },
+      onPointerLeave: () => {
+        over.current.pointer = false;
+        hide(closeDelay);
+      },
+      children: content
+    }
+  ) : null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    trigger,
+    panelNode && container ? createPortal(panelNode, container) : null
+  ] });
+}
+
+export { Tooltip };

package/dist/chunk-YLYOWZ4V.js

@@ -0,0 +1,33 @@
+import { useAnnouncer } from './chunk-RSAQOKH3.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './NewItemsNotice-T4DSSPVV.css';
+import { useRef, useEffect } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var plural = (count, noun) => `${count} ${noun}${count === 1 ? "" : "s"}`;
+function NewItemsNotice({
+  count,
+  noun,
+  onShow,
+  label = (n, word) => `Show ${plural(n, word)} that finished while you were reading`,
+  announcement = (n, word) => `${plural(n, word)} finished while you were reading.`,
+  className,
+  ...rest
+}) {
+  const announce = useAnnouncer();
+  const showing = count > 0;
+  const said = useRef(false);
+  useEffect(() => {
+    if (!showing) {
+      said.current = false;
+      return;
+    }
+    if (said.current) return;
+    said.current = true;
+    announce(announcement(count, noun));
+  }, [showing, count, noun, announce, announcement]);
+  if (!showing) return null;
+  return /* @__PURE__ */ jsx("button", { ...rest, type: "button", className: cx("crewlet-new-items", className), onClick: onShow, children: label(count, noun) });
+}
+
+export { NewItemsNotice };

package/dist/chunk-YODNNSZL.js

@@ -0,0 +1,63 @@
+import { VisuallyHidden } from './chunk-BZFWDIV6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './Meter-SKOOXQBC.css';
+import { useId } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function meterTone(percent) {
+  if (percent >= 100) return "danger";
+  if (percent >= 75) return "warning";
+  return "brand";
+}
+function progressTone(percent) {
+  return percent >= 100 ? "success" : "brand";
+}
+var RAMPS = {
+  spent: meterTone,
+  progress: progressTone
+};
+function Meter({
+  value,
+  max,
+  label,
+  valueText,
+  hint,
+  tone,
+  polarity = "spent",
+  size = "default",
+  hideLabel = false,
+  className,
+  ...rest
+}) {
+  const labelId = useId();
+  const bounded = max > 0;
+  const percent = bounded ? Math.min(100, Math.max(0, value / max * 100)) : 0;
+  const drawn = tone ?? RAMPS[polarity](percent);
+  const trailing = hint ?? valueText;
+  const reported = bounded ? Math.min(max, Math.max(0, value)) : value;
+  const spoken = bounded ? valueText ?? (reported === value ? void 0 : `${value} of ${max}`) : void 0;
+  const unspoken = !bounded && valueText !== void 0 && (hideLabel || hint !== void 0) ? valueText : void 0;
+  return /* @__PURE__ */ jsxs("div", { ...rest, className: cx("crewlet-meter", `crewlet-meter--${size}`, className), children: [
+    hideLabel ? /* @__PURE__ */ jsx(VisuallyHidden, { id: labelId, children: label }) : /* @__PURE__ */ jsxs("div", { className: "crewlet-meter__legend", children: [
+      /* @__PURE__ */ jsx("span", { id: labelId, className: "crewlet-meter__label", children: label }),
+      trailing === void 0 ? null : /* @__PURE__ */ jsx("span", { className: "crewlet-meter__hint", children: trailing })
+    ] }),
+    unspoken === void 0 ? null : /* @__PURE__ */ jsx(VisuallyHidden, { children: unspoken }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "crewlet-meter__track",
+        role: bounded ? "meter" : void 0,
+        "aria-labelledby": bounded ? labelId : void 0,
+        "aria-valuenow": bounded ? reported : void 0,
+        "aria-valuemin": bounded ? 0 : void 0,
+        "aria-valuemax": bounded ? max : void 0,
+        "aria-valuetext": spoken,
+        "aria-hidden": bounded ? void 0 : true,
+        children: /* @__PURE__ */ jsx("div", { className: "crewlet-meter__fill", "data-tone": drawn, style: { width: `${percent}%` } })
+      }
+    )
+  ] });
+}
+
+export { Meter, meterTone, progressTone };

package/dist/chunk-ZCR6YGQ4.js

@@ -0,0 +1 @@
+

package/dist/chunk-ZFATEERP.js

@@ -0,0 +1,144 @@
+import { VisuallyHidden } from './chunk-BZFWDIV6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './FilterChip-GTGLLOXE.css';
+import { createContext, useContext, useRef, useId, useCallback, useLayoutEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var GroupContext = createContext(null);
+var FILTER_CHIP_ATTRIBUTE = "data-crewlet-filter-chip";
+function FilterChip({
+  pressed,
+  onPressedChange,
+  count,
+  value,
+  className,
+  onClick,
+  children,
+  ...rest
+}) {
+  const group = useContext(GroupContext);
+  const radio = group?.semantics === "radio";
+  const on = radio ? value !== void 0 && group.value === value : pressed === true;
+  const activate = () => {
+    if (radio) {
+      const next = on && group.allowNone ? null : value ?? null;
+      group.choose(next);
+      onPressedChange?.(next !== null);
+      return;
+    }
+    onPressedChange?.(!on);
+  };
+  const state = radio ? { role: "radio", "aria-checked": on } : { "aria-pressed": on };
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ...rest,
+      ...state,
+      type: "button",
+      ...{ [FILTER_CHIP_ATTRIBUTE]: "" },
+      ...radio ? {} : { tabIndex: rest.tabIndex },
+      className: cx("crewlet-filter-chip", className),
+      onClick: (event) => {
+        onClick?.(event);
+        if (!event.defaultPrevented) activate();
+      },
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "crewlet-filter-chip__label", children }),
+        count === void 0 ? null : /* @__PURE__ */ jsx("span", { className: "crewlet-filter-chip__count", children: count })
+      ]
+    }
+  );
+}
+var ACTIVATE_HINT = "Press Enter or Space to apply the filter you land on.";
+var reachable = (chip) => !chip.disabled && chip.getAttribute("aria-disabled") !== "true";
+function moveTo(key, from, total) {
+  if (key === "ArrowRight" || key === "ArrowDown") return (from + 1) % total;
+  if (key === "ArrowLeft" || key === "ArrowUp") return (from - 1 + total) % total;
+  if (key === "Home") return 0;
+  if (key === "End") return total - 1;
+  return null;
+}
+function FilterChipGroup({
+  label,
+  semantics = "toggle",
+  activate = "automatic",
+  activateHint,
+  value,
+  onValueChange,
+  allowNone = false,
+  hideLabel = false,
+  className,
+  children
+}) {
+  const row = useRef(null);
+  const labelId = useId();
+  const hintId = useId();
+  const manual = semantics === "radio" && activate === "manual";
+  const hint = manual ? activateHint === void 0 ? ACTIVATE_HINT : activateHint : null;
+  const landed = useRef(null);
+  const chips = useCallback(
+    () => row.current === null ? [] : [...row.current.querySelectorAll(`[${FILTER_CHIP_ATTRIBUTE}]`)],
+    []
+  );
+  const placeStop = useCallback(() => {
+    if (semantics !== "radio") return;
+    const all = chips();
+    const held = manual && landed.current !== null ? all.indexOf(landed.current) : -1;
+    const chosen = all.findIndex((chip) => chip.getAttribute("aria-checked") === "true" && reachable(chip));
+    const stop = held >= 0 && reachable(all[held]) ? held : chosen < 0 ? all.findIndex(reachable) : chosen;
+    all.forEach((chip, index) => {
+      chip.tabIndex = index === stop ? 0 : -1;
+    });
+  }, [chips, manual, semantics]);
+  useLayoutEffect(placeStop);
+  const choose = useCallback(
+    (next) => {
+      onValueChange?.(next);
+    },
+    [onValueChange]
+  );
+  const onKeyDown = (event) => {
+    if (semantics !== "radio") return;
+    const open = chips().filter(reachable);
+    const from = open.indexOf(document.activeElement);
+    if (from < 0 || open.length === 0) return;
+    const to = moveTo(event.key, from, open.length);
+    if (to === null) return;
+    const next = open[to];
+    if (next === void 0) return;
+    event.preventDefault();
+    next.focus();
+    if (manual) {
+      landed.current = next;
+      placeStop();
+      return;
+    }
+    next.click();
+  };
+  const onFocus = (event) => {
+    if (!manual) return;
+    const target = event.target;
+    if (!target.hasAttribute(FILTER_CHIP_ATTRIBUTE)) return;
+    landed.current = target;
+    placeStop();
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: row,
+      role: semantics === "radio" ? "radiogroup" : "group",
+      "aria-labelledby": labelId,
+      "aria-describedby": hint ? hintId : void 0,
+      className: cx("crewlet-filter-chip-group", className),
+      onKeyDown,
+      onFocus,
+      children: [
+        hideLabel ? /* @__PURE__ */ jsx(VisuallyHidden, { id: labelId, children: label }) : /* @__PURE__ */ jsx("span", { id: labelId, className: "crewlet-filter-chip-group__label", children: label }),
+        /* @__PURE__ */ jsx(GroupContext.Provider, { value: { semantics, value, choose, allowNone }, children }),
+        hint ? /* @__PURE__ */ jsx(VisuallyHidden, { id: hintId, children: hint }) : null
+      ]
+    }
+  );
+}
+
+export { FILTER_CHIP_ATTRIBUTE, FilterChip, FilterChipGroup };

package/dist/generated/index.d.ts

@@ -0,0 +1,83 @@
+export * from '../Accordion/index.js';
+export * from '../AddPill/index.js';
+export * from '../Announcer/index.js';
+export * from '../AppShell/index.js';
+export * from '../Avatar/index.js';
+export * from '../BrandLockup/index.js';
+export * from '../Button/index.js';
+export * from '../CalendarGrid/index.js';
+export * from '../Callout/index.js';
+export * from '../Canvas/index.js';
+export * from '../Card/index.js';
+export * from '../Charts/index.js';
+export * from '../Checkbox/index.js';
+export * from '../CodeBlock/index.js';
+export * from '../Combobox/index.js';
+export * from '../CommandPalette/index.js';
+export * from '../Container/index.js';
+export * from '../Copyable/index.js';
+export * from '../Count/index.js';
+export * from '../DataTable/index.js';
+export * from '../DataView/index.js';
+export * from '../DateTimePicker/index.js';
+export * from '../DescriptionList/index.js';
+export * from '../DiffList/index.js';
+export * from '../Disclosure/index.js';
+export * from '../EmptyState/index.js';
+export * from '../EmptyValue/index.js';
+export * from '../EntityChip/index.js';
+export * from '../ErrorBoundary/index.js';
+export * from '../Eyebrow/index.js';
+export * from '../FilterChip/index.js';
+export * from '../Fullscreen/index.js';
+export * from '../IconButton/index.js';
+export * from '../ImageUpload/index.js';
+export * from '../InlineCode/index.js';
+export * from '../Input/index.js';
+export * from '../Kbd/index.js';
+export * from '../Layer/index.js';
+export * from '../Layout/index.js';
+export * from '../Link/index.js';
+export * from '../List/index.js';
+export * from '../ListInput/index.js';
+export * from '../Listbox/index.js';
+export * from '../Menu/index.js';
+export * from '../Meter/index.js';
+export * from '../Modal/index.js';
+export * from '../NewItemsNotice/index.js';
+export * from '../OrgLabel/index.js';
+export * from '../OrgNode/index.js';
+export * from '../OrgTable/index.js';
+export * from '../PageHeader/index.js';
+export * from '../Popover/index.js';
+export * from '../PricingCard/index.js';
+export * from '../Prose/index.js';
+export * from '../RelativeTime/index.js';
+export * from '../SearchTrigger/index.js';
+export * from '../Section/index.js';
+export * from '../SegmentedControl/index.js';
+export * from '../Select/index.js';
+export * from '../Shortcut/index.js';
+export * from '../SidebarNav/index.js';
+export * from '../Skeleton/index.js';
+export * from '../StatCard/index.js';
+export * from '../StatGroup/index.js';
+export * from '../StatusDot/index.js';
+export * from '../Switch/index.js';
+export * from '../Table/index.js';
+export * from '../Tabs/index.js';
+export * from '../Tag/index.js';
+export * from '../TagGroup/index.js';
+export * from '../TagsInput/index.js';
+export * from '../Text/index.js';
+export * from '../ThemeSwitcher/index.js';
+export * from '../TimeWindowPicker/index.js';
+export * from '../Timeline/index.js';
+export * from '../Toaster/index.js';
+export * from '../Toolbar/index.js';
+export * from '../Tooltip/index.js';
+export * from '../Tree/index.js';
+export * from '../TreeCanvas/index.js';
+export * from '../TreeGrid/index.js';
+export * from '../VisuallyHidden/index.js';
+export * from '../utils/index.js';