@crewlethq/ui 0.2.0 → 0.4.0

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-NDCATSW7.js

@@ -0,0 +1,229 @@
+import { CardHeaderSlotContext } from './chunk-AV2DXAEL.js';
+import { Count } from './chunk-BHHIIK3M.js';
+import { useHeadingLevel, HeadingLevelProvider, nextHeadingLevel, headingTag } from './chunk-PQADV6P6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './Card-RLR254LD.css';
+import { createContext, useId, useState, isValidElement, useRef, useCallback, useMemo, Children, cloneElement, useContext, useEffect, Fragment } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var CardContext = createContext(null);
+var isSlot = (node) => isValidElement(node) && SLOT_TYPES.has(node.type);
+function slotsIn(children) {
+  const found = { nodes: [], any: false, header: false };
+  for (const child of Children.toArray(children)) {
+    if (isValidElement(child) && child.type === Fragment) {
+      const nested = slotsIn(child.props.children);
+      if (nested.any) {
+        found.nodes.push(...nested.nodes);
+        found.any = true;
+        found.header = found.header || nested.header;
+        continue;
+      }
+    }
+    found.nodes.push(child);
+    if (!isValidElement(child)) continue;
+    if (child.type === CardHeader) {
+      found.any = true;
+      found.header = true;
+      continue;
+    }
+    if (isSlot(child)) found.any = true;
+  }
+  return found;
+}
+function withBodies(nodes, padding) {
+  if (padding === "none") return nodes;
+  const out = [];
+  let run = [];
+  const close = () => {
+    if (run.length === 0) return;
+    out.push(
+      // Keyed on the position among the card's own children, which is where
+      // this body is, so a run that gains or loses a node is an update rather
+      // than a remount of everything inside it.
+      /* @__PURE__ */ jsx(CardBody, { padding, children: run }, `body-${out.length}`)
+    );
+    run = [];
+  };
+  for (const node of nodes) {
+    if (isSlot(node)) {
+      close();
+      out.push(node);
+      continue;
+    }
+    run.push(node);
+  }
+  close();
+  return out;
+}
+function cardClass({ variant = "default", padding = "md", interactive, rail, selected, className }, flush, extra) {
+  return cx(
+    "crewlet-card",
+    `crewlet-card--${variant}`,
+    `crewlet-card--p-${padding}`,
+    flush && "crewlet-card--flush",
+    rail && `crewlet-card--rail-${rail}`,
+    selected && "is-selected",
+    interactive && "is-interactive",
+    extra,
+    className
+  );
+}
+var CardRoot = ({
+  variant = "default",
+  padding,
+  interactive = false,
+  rail,
+  selected = false,
+  as = "div",
+  href,
+  asChild = false,
+  className,
+  children,
+  ...rest
+}) => {
+  const level = useHeadingLevel();
+  const titleId = useId();
+  const [hasTitle, setHasTitle] = useState(false);
+  const navigates = href !== void 0 || asChild;
+  const inner = asChild && isValidElement(children) ? children.props["children"] : children;
+  const slots = slotsIn(inner);
+  const flush = slots.any;
+  const contentPadding = padding ?? "md";
+  const classes = cardClass(
+    {
+      variant,
+      padding: flush ? "none" : padding ?? (variant === "subtle" ? "tight" : "md"),
+      interactive: interactive || navigates,
+      rail,
+      selected,
+      className
+    },
+    flush
+  );
+  const content = flush ? withBodies(slots.nodes, contentPadding) : children;
+  const [chromeNode, setChromeNode] = useState(null);
+  const chromeHolder = useRef(null);
+  const hostChrome = useCallback((node) => setChromeNode(node), []);
+  const claimChrome = useCallback((claimant) => {
+    chromeHolder.current ??= claimant;
+    return chromeHolder.current === claimant;
+  }, []);
+  const releaseChrome = useCallback((claimant) => {
+    if (chromeHolder.current === claimant) chromeHolder.current = null;
+  }, []);
+  const headerSlot = useMemo(
+    () => ({
+      hasHeader: slots.header,
+      node: chromeNode,
+      claim: claimChrome,
+      release: releaseChrome
+    }),
+    [slots.header, chromeNode, claimChrome, releaseChrome]
+  );
+  const context = {
+    titleLevel: level,
+    titleId,
+    registerTitle: () => setHasTitle(true),
+    hostChrome
+  };
+  const body = /* @__PURE__ */ jsx(CardContext.Provider, { value: context, children: /* @__PURE__ */ jsx(CardHeaderSlotContext.Provider, { value: headerSlot, children: /* @__PURE__ */ jsx(HeadingLevelProvider, { level: nextHeadingLevel(level), children: content }) }) });
+  if (asChild) {
+    const child = Children.only(children);
+    if (!isValidElement(child)) {
+      throw new Error("Card with asChild expects exactly one valid React element child.");
+    }
+    const childEl = child;
+    return cloneElement(
+      childEl,
+      { ...rest, className: cx(childEl.props["className"], classes) },
+      /* @__PURE__ */ jsx(CardContext.Provider, { value: context, children: /* @__PURE__ */ jsx(CardHeaderSlotContext.Provider, { value: headerSlot, children: /* @__PURE__ */ jsx(HeadingLevelProvider, { level: nextHeadingLevel(level), children: content }) }) })
+    );
+  }
+  if (href !== void 0) {
+    return /* @__PURE__ */ jsx("a", { ...rest, href, className: classes, children: body });
+  }
+  const Tag = as;
+  const sectioning = as === "section" || as === "article";
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      ...rest,
+      className: classes,
+      "aria-labelledby": sectioning && hasTitle ? rest["aria-labelledby"] ?? titleId : rest["aria-labelledby"],
+      children: body
+    }
+  );
+};
+var CardHeader = ({
+  divided = true,
+  icon,
+  count,
+  subtitle,
+  actions,
+  className,
+  children,
+  ...rest
+}) => {
+  const card = useContext(CardContext);
+  const host = card?.hostChrome;
+  const chromeRef = useCallback(
+    (node) => {
+      host?.(node);
+    },
+    [host]
+  );
+  return /* @__PURE__ */ jsxs("div", { ...rest, className: cx("crewlet-card__header", !divided && "crewlet-card__header--plain", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "crewlet-card__header-main", children: [
+      icon === void 0 ? null : /* @__PURE__ */ jsx("span", { className: "crewlet-card__header-icon", "aria-hidden": true, children: icon }),
+      children,
+      count === void 0 ? null : /* @__PURE__ */ jsx(Count, { value: count })
+    ] }),
+    subtitle === void 0 ? null : /* @__PURE__ */ jsx("span", { className: "crewlet-card__subtitle", children: subtitle }),
+    actions === void 0 ? null : /* @__PURE__ */ jsx("div", { className: "crewlet-card__header-actions", children: actions }),
+    card === null ? null : /* @__PURE__ */ jsx("div", { className: "crewlet-card__header-chrome", ref: chromeRef })
+  ] });
+};
+var CardBody = ({ padding = "md", className, children, ...rest }) => /* @__PURE__ */ jsx("div", { ...rest, className: cx("crewlet-card__body", `crewlet-card__body--p-${padding}`, className), children });
+var CardFooter = ({ variant = "actions", padding = "sm", className, children, ...rest }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ...rest,
+    className: cx(
+      "crewlet-card__footer",
+      `crewlet-card__footer--${variant}`,
+      `crewlet-card__footer--p-${padding}`,
+      className
+    ),
+    children
+  }
+);
+var CardTitle = ({ as, truncate = false, className, children, ...rest }) => {
+  const card = useContext(CardContext);
+  const fallback = useHeadingLevel();
+  const Tag = as ?? headingTag(card?.titleLevel ?? fallback);
+  const register = card?.registerTitle;
+  useEffect(() => {
+    register?.();
+  }, [register]);
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      ...rest,
+      id: rest.id ?? card?.titleId,
+      className: cx("crewlet-card__title", truncate && "crewlet-card__title--truncate", className),
+      children
+    }
+  );
+};
+var CardDescription = ({ className, children, ...rest }) => /* @__PURE__ */ jsx("p", { ...rest, className: cx("crewlet-card__description", className), children });
+var SLOT_TYPES = /* @__PURE__ */ new Set([CardHeader, CardBody, CardFooter]);
+var Card = Object.assign(CardRoot, {
+  Header: CardHeader,
+  Body: CardBody,
+  Footer: CardFooter,
+  Title: CardTitle,
+  Description: CardDescription
+});
+
+export { Card };

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 };