@crewlethq/ui 0.2.0 → 0.3.0

package/dist/chunk-LGCPQIOZ.js

@@ -0,0 +1,49 @@
+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 Meter({
+  value,
+  max,
+  label,
+  valueText,
+  hint,
+  tone,
+  size = "default",
+  hideLabel = false,
+  className,
+  ...rest
+}) {
+  const labelId = useId();
+  const percent = max > 0 ? Math.min(100, Math.max(0, value / max * 100)) : 0;
+  const drawn = tone ?? meterTone(percent);
+  const trailing = hint ?? valueText;
+  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 })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "crewlet-meter__track",
+        role: "meter",
+        "aria-labelledby": labelId,
+        "aria-valuenow": value,
+        "aria-valuemin": 0,
+        "aria-valuemax": max,
+        "aria-valuetext": valueText,
+        children: /* @__PURE__ */ jsx("div", { className: "crewlet-meter__fill", "data-tone": drawn, style: { width: `${percent}%` } })
+      }
+    )
+  ] });
+}
+
+export { Meter, meterTone };

package/dist/chunk-LWKJQTOM.js

@@ -0,0 +1,77 @@
+import { DisclosureAnatomy } from './chunk-5KPQ6D7N.js';
+import { useHeadingLevel } from './chunk-PQADV6P6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './Disclosure-VKBJJIZ7.css';
+import { useState, useId, useCallback } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function Disclosure({
+  title,
+  meta,
+  count,
+  mono,
+  actions,
+  open: controlledOpen,
+  defaultOpen = false,
+  onOpenChange,
+  lazy = false,
+  variant = "default",
+  size = "default",
+  headingLevel,
+  className,
+  children,
+  ...rest
+}) {
+  const [uncontrolled, setUncontrolled] = useState(defaultOpen);
+  const controlled = controlledOpen !== void 0;
+  const open = controlled ? controlledOpen : uncontrolled;
+  const level = useHeadingLevel();
+  const rid = useId();
+  const toggle = useCallback(() => {
+    if (!controlled) setUncontrolled(!open);
+    onOpenChange?.(!open);
+  }, [controlled, onOpenChange, open]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...rest,
+      className: cx(
+        "crewlet-disclosure",
+        `crewlet-disclosure--${variant}`,
+        size === "compact" && "crewlet-disclosure--compact",
+        className
+      ),
+      "data-state": open ? "open" : "closed",
+      children: [
+        /* @__PURE__ */ jsx(
+          DisclosureAnatomy,
+          {
+            open,
+            onToggle: toggle,
+            title,
+            meta,
+            count,
+            mono,
+            actions,
+            headingLevel: headingLevel ?? level,
+            triggerId: `${rid}-trigger`,
+            panelId: `${rid}-panel`
+          }
+        ),
+        lazy && !open ? null : /* @__PURE__ */ jsx(
+          "div",
+          {
+            id: `${rid}-panel`,
+            role: "region",
+            "aria-labelledby": `${rid}-trigger`,
+            className: "crewlet-disclosure__panel",
+            hidden: !open,
+            children
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { Disclosure };

package/dist/chunk-MNAXYY3R.js

@@ -0,0 +1,215 @@
+import { useModalLayer, focusables } from './chunk-ITHXJHBB.js';
+import { IconButton } from './chunk-F27EPQ7D.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './AppShell-NVE6LHNI.css';
+import { createContext, useContext, useId, useState, useRef, useCallback, useEffect, useLayoutEffect, useSyncExternalStore } from 'react';
+import { breakpoint } from '@crewlethq/tokens';
+import { MenuGlyph } from '@crewlethq/icons/glyphs';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var NARROW = `(max-width: ${breakpoint.shell})`;
+var AppShellContext = createContext(null);
+function useAppShell() {
+  const shell = useContext(AppShellContext);
+  if (!shell) throw new Error("useAppShell must be called inside an <AppShell>.");
+  return shell;
+}
+function useMediaMatch(query) {
+  const subscribe = useCallback(
+    (notify) => {
+      if (typeof window === "undefined" || typeof window.matchMedia !== "function") return () => {
+      };
+      const list = window.matchMedia(query);
+      list.addEventListener("change", notify);
+      return () => list.removeEventListener("change", notify);
+    },
+    [query]
+  );
+  const read = useCallback(
+    () => typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia(query).matches : false,
+    [query]
+  );
+  return useSyncExternalStore(subscribe, read, () => false);
+}
+function AppShell({
+  sidebar,
+  topbar,
+  banner,
+  footer,
+  mainId,
+  mainRef,
+  fill = false,
+  navigationKey,
+  toggleLabel = "Sections",
+  skipLabel = "Skip to content",
+  className,
+  style,
+  children,
+  ...rest
+}) {
+  const generatedId = useId();
+  const railId = `${generatedId}-rail`;
+  const main = mainId ?? `${generatedId}-main`;
+  const narrow = useMediaMatch(NARROW);
+  const [drawerOpen, setDrawerOpen] = useState(false);
+  const [scroller, setScroller] = useState(null);
+  const [drawerZ, setDrawerZ] = useState(null);
+  const rail = useRef(null);
+  const closeDrawer = useCallback(() => setDrawerOpen(false), []);
+  const openDrawer = useCallback(() => setDrawerOpen(true), []);
+  const toggleDrawer = useCallback(() => setDrawerOpen((open) => !open), []);
+  useEffect(() => setDrawerOpen(false), [navigationKey]);
+  useEffect(() => {
+    if (!narrow) setDrawerOpen(false);
+  }, [narrow]);
+  const setMain = useCallback(
+    (element) => {
+      setScroller(element);
+      if (typeof mainRef === "function") mainRef(element);
+      else if (mainRef) mainRef.current = element;
+    },
+    [mainRef]
+  );
+  const shell = {
+    narrow,
+    drawerOpen,
+    openDrawer,
+    closeDrawer,
+    toggleDrawer,
+    scroller,
+    railId,
+    toggleLabel,
+    hasRail: sidebar !== void 0 && sidebar !== null
+  };
+  return /* @__PURE__ */ jsx(AppShellContext.Provider, { value: shell, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...rest,
+      className: cx("crewlet-app-shell", fill && "crewlet-app-shell--fill", className),
+      style: drawerZ === null ? style : { ...style, ["--crewlet-app-shell-drawer-z"]: String(drawerZ) },
+      children: [
+        /* @__PURE__ */ jsx(
+          "a",
+          {
+            className: "crewlet-app-shell__skip",
+            href: `#${main}`,
+            onClick: (event) => {
+              event.preventDefault();
+              scroller?.focus();
+            },
+            children: skipLabel
+          }
+        ),
+        drawerOpen ? /* @__PURE__ */ jsx(ShellDrawer, { rail, onClose: closeDrawer, onZIndex: setDrawerZ }) : null,
+        shell.hasRail ? /* @__PURE__ */ jsx(
+          "aside",
+          {
+            ref: rail,
+            id: railId,
+            className: "crewlet-app-shell__rail",
+            "data-open": drawerOpen || void 0,
+            role: drawerOpen ? "dialog" : void 0,
+            "aria-modal": drawerOpen || void 0,
+            "aria-label": drawerOpen ? toggleLabel : void 0,
+            children: sidebar
+          }
+        ) : null,
+        /* @__PURE__ */ jsxs("div", { className: "crewlet-app-shell__column", children: [
+          topbar,
+          banner ? /* @__PURE__ */ jsx("div", { className: "crewlet-app-shell__banner", children: banner }) : null,
+          /* @__PURE__ */ jsx("main", { id: main, ref: setMain, className: "crewlet-app-shell__main", tabIndex: -1, children: /* @__PURE__ */ jsx("div", { className: "crewlet-app-shell__content", children }) }),
+          footer
+        ] })
+      ]
+    }
+  ) });
+}
+function ShellDrawer({
+  rail,
+  onClose,
+  onZIndex
+}) {
+  const layer = useModalLayer({
+    onClose,
+    // The row for the screen the reader is on, which is where the rail's own
+    // highlight already points, else the first control in it.
+    initialFocus: () => {
+      const element = rail.current;
+      if (!element) return null;
+      return element.querySelector('[aria-current="page"]') ?? focusables(element)[0] ?? null;
+    }
+  });
+  const { panelRef, zIndex } = layer;
+  useEffect(() => {
+    onZIndex(zIndex);
+    return () => onZIndex(null);
+  }, [onZIndex, zIndex]);
+  useLayoutEffect(() => {
+    panelRef(rail.current);
+    return () => panelRef(null);
+  }, [panelRef, rail]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "crewlet-app-shell__veil",
+      ref: layer.veilRef,
+      role: "presentation",
+      style: { zIndex }
+    }
+  );
+}
+function AppShellRail({ header, footer, className, children }) {
+  return /* @__PURE__ */ jsxs("div", { className: cx("crewlet-app-shell__rail-inner", className), children: [
+    header ? /* @__PURE__ */ jsx("div", { className: "crewlet-app-shell__rail-head", children: header }) : null,
+    /* @__PURE__ */ jsx("div", { className: "crewlet-app-shell__rail-body", children }),
+    footer ? /* @__PURE__ */ jsx("div", { className: "crewlet-app-shell__rail-foot", children: footer }) : null
+  ] });
+}
+function AppShellRailRow({ icon, trailing, onClick, label, className, children }) {
+  const inside = /* @__PURE__ */ jsxs(Fragment, { children: [
+    icon ? /* @__PURE__ */ jsx("span", { className: "crewlet-app-shell__rail-row-icon", "aria-hidden": true, children: icon }) : null,
+    /* @__PURE__ */ jsx("span", { className: "crewlet-app-shell__rail-row-label", children }),
+    trailing ? /* @__PURE__ */ jsx("span", { className: "crewlet-app-shell__rail-row-trailing", children: trailing }) : null
+  ] });
+  if (onClick === void 0) return /* @__PURE__ */ jsx("div", { className: cx("crewlet-app-shell__rail-row", className), children: inside });
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: cx("crewlet-app-shell__rail-row", "crewlet-app-shell__rail-row--action", className),
+      "aria-label": label,
+      onClick,
+      children: inside
+    }
+  );
+}
+function AppShellToggle({ className }) {
+  const { drawerOpen, toggleDrawer, railId, toggleLabel, hasRail } = useAppShell();
+  if (!hasRail) return null;
+  return /* @__PURE__ */ jsx("span", { className: cx("crewlet-app-shell__toggle", className), children: /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      label: toggleLabel,
+      icon: /* @__PURE__ */ jsx(MenuGlyph, { size: "md" }),
+      size: "md",
+      "aria-expanded": drawerOpen,
+      "aria-controls": railId,
+      "aria-haspopup": "dialog",
+      onClick: toggleDrawer
+    }
+  ) });
+}
+function AppShellTopbar({ title, titleId, actions, className, children, ...rest }) {
+  return /* @__PURE__ */ jsxs("header", { ...rest, className: cx("crewlet-app-shell__topbar", className), children: [
+    /* @__PURE__ */ jsx(AppShellToggle, {}),
+    title === void 0 ? null : /* @__PURE__ */ jsx("h1", { className: "crewlet-app-shell__title", id: titleId, children: title }),
+    children,
+    actions ? /* @__PURE__ */ jsx("div", { className: "crewlet-app-shell__actions", children: actions }) : null
+  ] });
+}
+AppShell.Rail = AppShellRail;
+AppShell.RailRow = AppShellRailRow;
+AppShell.Topbar = AppShellTopbar;
+AppShell.Toggle = AppShellToggle;
+
+export { AppShell, AppShellRail, AppShellRailRow, AppShellToggle, AppShellTopbar, useAppShell };

package/dist/chunk-NN62JQLR.js

@@ -0,0 +1,29 @@
+import { cx } from './chunk-ODEQTPFM.js';
+import './InlineCode-6WSR5COL.css';
+import { jsx } from 'react/jsx-runtime';
+
+function InlineCode({
+  variant = "default",
+  tone = "default",
+  truncate = false,
+  className,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    "code",
+    {
+      ...rest,
+      className: cx(
+        "crewlet-inline-code",
+        `crewlet-inline-code--${variant}`,
+        tone === "inherit" && "crewlet-inline-code--inherit",
+        truncate && "crewlet-inline-code--truncate",
+        className
+      ),
+      children
+    }
+  );
+}
+
+export { InlineCode };

package/dist/chunk-NPZY6YYL.js

@@ -0,0 +1,251 @@
+import { useLayerContainer } from './chunk-7RPGY3JE.js';
+import { VisuallyHidden } from './chunk-BZFWDIV6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './Toaster-NVDCEIP5.css';
+import { createContext, useMemo, useState, useRef, useEffect, useContext, useCallback } from 'react';
+import { createPortal } from 'react-dom';
+import { CloseGlyph, ErrorFillGlyph, WarningFillGlyph, CheckCircleFillGlyph, InfoFillGlyph } from '@crewlethq/icons/glyphs';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var ICONS = {
+  info: /* @__PURE__ */ jsx(InfoFillGlyph, { size: "md" }),
+  success: /* @__PURE__ */ jsx(CheckCircleFillGlyph, { size: "md" }),
+  warning: /* @__PURE__ */ jsx(WarningFillGlyph, { size: "md" }),
+  danger: /* @__PURE__ */ jsx(ErrorFillGlyph, { size: "md" })
+};
+var TITLES = {
+  info: null,
+  success: "Success",
+  warning: "Heads up",
+  danger: "Something went wrong"
+};
+var DURATIONS = {
+  info: 4e3,
+  success: 4e3,
+  warning: 0,
+  danger: 0
+};
+var KNOWN = /* @__PURE__ */ new Set(["info", "success", "warning", "danger"]);
+var isKnown = (variant) => KNOWN.has(variant);
+var politeness = (variant) => variant === "danger" || variant === "quota" ? "assertive" : "polite";
+var isToastAction = (value) => {
+  if (!value || typeof value !== "object") return false;
+  const shape = value;
+  return "label" in shape && ("onClick" in shape || "href" in shape);
+};
+var sentences = (parts) => parts.length < 2 ? parts[0] ?? "" : parts.map((part) => /[.!?]$/.test(part) ? part : `${part}.`).join(" ");
+function spoken(toast, titles) {
+  const parts = [toast.title, toast.message].filter((part) => typeof part === "string");
+  if (parts.length > 0) return parts.join(". ");
+  const variant = toast.variant ?? "info";
+  return isKnown(variant) ? titles[variant] ?? "Notification" : "Notification";
+}
+function ToastItem({
+  toast,
+  onDismiss,
+  renderAction,
+  dismissLabel,
+  titles
+}) {
+  const variant = toast.variant ?? "info";
+  const known = isKnown(variant);
+  const { id, version } = toast;
+  const duration = toast.duration ?? (known ? DURATIONS[variant] : 0);
+  const dismiss = useCallback(() => onDismiss(id), [onDismiss, id]);
+  const [paused, setPaused] = useState(false);
+  const remaining = useRef(duration);
+  useEffect(() => {
+    remaining.current = duration;
+  }, [duration, version]);
+  useEffect(() => {
+    if (duration <= 0 || paused) return;
+    const startedAt = Date.now();
+    const timer = window.setTimeout(dismiss, remaining.current);
+    return () => {
+      window.clearTimeout(timer);
+      remaining.current = Math.max(0, remaining.current - (Date.now() - startedAt));
+    };
+  }, [duration, paused, version, dismiss]);
+  const icon = toast.icon ?? (known ? ICONS[variant] : null);
+  const title = toast.title ?? (toast.message === void 0 && known ? titles[variant] : null);
+  const action = () => {
+    if (toast.action === void 0 || toast.action === null) return null;
+    if (!isToastAction(toast.action)) return /* @__PURE__ */ jsx("div", { className: "crewlet-toast__actions", children: toast.action });
+    const one = toast.action;
+    if (renderAction) return /* @__PURE__ */ jsx("div", { className: "crewlet-toast__actions", children: renderAction(one, { onDismiss: dismiss }) });
+    if (one.href) {
+      const external = one.external ?? /^https?:\/\//.test(one.href);
+      return /* @__PURE__ */ jsx("div", { className: "crewlet-toast__actions", children: /* @__PURE__ */ jsx(
+        "a",
+        {
+          className: "crewlet-toast__action-link",
+          href: one.href,
+          target: external ? "_blank" : void 0,
+          rel: external ? "noreferrer" : void 0,
+          onClick: dismiss,
+          children: one.label
+        }
+      ) });
+    }
+    return /* @__PURE__ */ jsx("div", { className: "crewlet-toast__actions", children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "crewlet-toast__action-btn",
+        onClick: () => {
+          one.onClick?.();
+          dismiss();
+        },
+        children: one.label
+      }
+    ) });
+  };
+  return (
+    /*
+     * NO ROLE AND NO LIVE REGION HERE. The two regions at the foot of the
+     * stack say what arrived; a toast that also announced itself would be a
+     * live region inside a live region, which assistive technology reads
+     * twice or not at all.
+     */
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cx("crewlet-toast", `crewlet-toast--${variant}`),
+        onMouseEnter: () => setPaused(true),
+        onMouseLeave: () => setPaused(false),
+        onFocus: () => setPaused(true),
+        onBlur: () => setPaused(false),
+        children: [
+          toast.renderBody ? toast.renderBody({ onDismiss: dismiss, toast }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            icon ? /* @__PURE__ */ jsx("span", { className: "crewlet-toast__icon", "aria-hidden": true, children: icon }) : null,
+            /* @__PURE__ */ jsxs("div", { className: "crewlet-toast__body", children: [
+              title ? /* @__PURE__ */ jsx("div", { className: "crewlet-toast__title", children: title }) : null,
+              toast.message ? /* @__PURE__ */ jsx("div", { className: "crewlet-toast__message", children: toast.message }) : null,
+              action()
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("button", { type: "button", className: "crewlet-toast__dismiss", onClick: dismiss, "aria-label": dismissLabel, children: /* @__PURE__ */ jsx(CloseGlyph, { size: "sm" }) }),
+          duration > 0 ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cx("crewlet-toast__progress", paused && "is-paused"),
+              style: { animationDuration: `${duration}ms` },
+              "aria-hidden": true
+            },
+            version ?? 0
+          ) : null
+        ]
+      }
+    )
+  );
+}
+function Toaster({
+  toasts,
+  onDismiss,
+  renderAction,
+  position = "bottom-right",
+  politeLabel = "Notifications",
+  assertiveLabel = "Alerts",
+  dismissLabel = "Dismiss notification",
+  titles,
+  className = ""
+}) {
+  const container = useLayerContainer();
+  const said = useMemo(() => ({ ...TITLES, ...titles }), [titles]);
+  const [polite, setPolite] = useState({ text: "", n: 0 });
+  const [assertive, setAssertive] = useState({ text: "", n: 0 });
+  const announced = useRef(/* @__PURE__ */ new Set());
+  const nth = useRef(0);
+  useEffect(() => {
+    const live = /* @__PURE__ */ new Set();
+    const fresh = { polite: [], assertive: [] };
+    for (const toast of toasts) {
+      const key = `${toast.id}:${toast.version ?? 0}`;
+      live.add(key);
+      if (announced.current.has(key)) continue;
+      fresh[politeness(toast.variant ?? "info")].push(spoken(toast, said));
+    }
+    announced.current = live;
+    if (fresh.polite.length > 0) {
+      nth.current += 1;
+      setPolite({ text: sentences(fresh.polite), n: nth.current });
+    }
+    if (fresh.assertive.length > 0) {
+      nth.current += 1;
+      setAssertive({ text: sentences(fresh.assertive), n: nth.current });
+    }
+  }, [toasts, said]);
+  if (container === null) return null;
+  return createPortal(
+    /*
+     * ALWAYS MOUNTED, which is the change from 0.2.0. The whole element used
+     * to arrive with the first toast, and a live region that is inserted
+     * already holding its text is a region most screen readers never announce:
+     * they watch a region for changes, and a region's first appearance is not
+     * one.
+     */
+    /* @__PURE__ */ jsxs("div", { className: cx("crewlet-toaster", `crewlet-toaster--${position}`, className), children: [
+      toasts.map((toast) => /* @__PURE__ */ jsx(
+        ToastItem,
+        {
+          toast,
+          onDismiss,
+          renderAction,
+          dismissLabel,
+          titles: said
+        },
+        toast.id
+      )),
+      /* @__PURE__ */ jsxs(VisuallyHidden, { children: [
+        /* @__PURE__ */ jsx("span", { role: "status", "aria-live": "polite", "aria-label": politeLabel, children: /* @__PURE__ */ jsx("span", { children: polite.text }, polite.n) }),
+        /* @__PURE__ */ jsx("span", { role: "alert", "aria-live": "assertive", "aria-label": assertiveLabel, children: /* @__PURE__ */ jsx("span", { children: assertive.text }, assertive.n) })
+      ] })
+    ] }),
+    container
+  );
+}
+var NONE = {
+  ok: () => "",
+  failed: () => "",
+  show: () => "",
+  dismiss: () => {
+  }
+};
+var ToastContext = createContext(NONE);
+function useToast() {
+  return useContext(ToastContext);
+}
+function ToastProvider({ children, position = "bottom-right", renderAction, max = 4 }) {
+  const [toasts, setToasts] = useState([]);
+  const next = useRef(1);
+  const dismiss = useCallback((id) => {
+    setToasts((current) => current.filter((toast) => toast.id !== id));
+  }, []);
+  const show = useCallback(
+    (toast) => {
+      const id = toast.id ?? `crewlet-toast-${next.current++}`;
+      setToasts((current) => {
+        const rest = current.filter((one) => one.id !== id);
+        const version = (current.find((one) => one.id === id)?.version ?? 0) + 1;
+        return [...rest, { ...toast, id, version }].slice(-max);
+      });
+      return id;
+    },
+    [max]
+  );
+  const api = useMemo(
+    () => ({
+      show,
+      dismiss,
+      ok: (message, options) => show({ ...options, variant: "success", message }),
+      failed: (message, options) => show({ ...options, variant: "danger", message })
+    }),
+    [show, dismiss]
+  );
+  return /* @__PURE__ */ jsxs(ToastContext.Provider, { value: api, children: [
+    children,
+    /* @__PURE__ */ jsx(Toaster, { toasts, onDismiss: dismiss, position, renderAction })
+  ] });
+}
+
+export { ToastProvider, Toaster, useToast };