@crewlethq/ui 0.2.0 → 0.3.0

package/dist/chunk-ARMRX2YV.js

@@ -0,0 +1,96 @@
+import { useRoving, tabStop, tabId } from './chunk-YMWONFSI.js';
+import { Count } from './chunk-BHHIIK3M.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './Tabs-VLICJFVB.css';
+import './SegmentedControl-X3BI3XU4.css';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function SegmentedControl({
+  label,
+  options,
+  value,
+  onValueChange,
+  size = "md",
+  className = "",
+  semantics,
+  panelId
+}) {
+  const radio = semantics === "radio";
+  const cards = options.some((option) => option.description !== void 0);
+  const { buttons, onKeyDown } = useRoving(
+    options.length,
+    radio ? (index) => onValueChange(options[index].value) : null
+  );
+  const selected = tabStop(
+    options,
+    Math.max(
+      0,
+      options.findIndex((option) => option.value === value)
+    )
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cx(
+        "crewlet-tabs",
+        /*
+         * THE PILL CHROME IS NOT WORN IN CARDS MODE. A card row is not a chip
+         * in a tinted container: the pill's own rules set the container's
+         * background, border, padding and `width: fit-content`, and each
+         * option's padding, radius and active chip. Left on, every one of
+         * them still applied (the two stylesheets are single-class rules and
+         * Tabs.css is bundled last), so the cards were drawn inside a pill
+         * bar sized to its content, which is what the mode exists to avoid.
+         */
+        !cards && "crewlet-tabs--pill",
+        `crewlet-tabs--${size}`,
+        "crewlet-segmented",
+        cards && "crewlet-segmented--cards",
+        className
+      ),
+      role: radio ? "radiogroup" : "tablist",
+      "aria-label": label,
+      children: options.map((option, index) => {
+        const chosen = option.value === value;
+        const named = option.srLabel ?? (option.label ? void 0 : option.title);
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            ref: (el) => {
+              buttons.current[index] = el;
+            },
+            type: "button",
+            role: radio ? "radio" : "tab",
+            id: radio || !panelId ? void 0 : tabId(panelId, option.value),
+            "aria-checked": radio ? chosen : void 0,
+            "aria-selected": radio ? void 0 : chosen,
+            "aria-controls": radio ? void 0 : panelId,
+            "aria-label": named,
+            tabIndex: index === selected ? 0 : -1,
+            title: option.title,
+            disabled: option.disabled,
+            className: cx(
+              "crewlet-tabs__tab",
+              "crewlet-segmented__option",
+              chosen && "is-active",
+              option.disabled && "is-disabled"
+            ),
+            onClick: () => onValueChange(option.value),
+            onKeyDown: (event) => onKeyDown(event, radio),
+            children: [
+              option.icon ? /* @__PURE__ */ jsx("span", { className: "crewlet-tabs__icon", children: option.icon }) : null,
+              option.label || option.description ? /* @__PURE__ */ jsxs("span", { className: "crewlet-segmented__text", children: [
+                /* @__PURE__ */ jsx("span", { className: "crewlet-tabs__label", children: option.label }),
+                option.description ? /* @__PURE__ */ jsx("span", { className: "crewlet-segmented__description", children: option.description }) : null
+              ] }) : null,
+              option.count != null ? /* @__PURE__ */ jsx(Count, { value: option.count }) : null
+            ]
+          },
+          option.value
+        );
+      })
+    }
+  );
+}
+
+export { SegmentedControl };

package/dist/chunk-AV2DXAEL.js

@@ -0,0 +1,27 @@
+import { createContext, useContext, useRef, useState, useLayoutEffect } from 'react';
+
+// src/Card/headerSlot.ts
+var CardHeaderSlotContext = createContext(null);
+var NO_HEADER = { hosted: false, node: null };
+function useCardHeaderSlot(wanted) {
+  const slot = useContext(CardHeaderSlotContext);
+  const claimant = useRef(null);
+  claimant.current ??= {};
+  const [lost, setLost] = useState(false);
+  const offered = wanted && slot !== null && slot.hasHeader;
+  const claim = slot?.claim;
+  const release = slot?.release;
+  useLayoutEffect(() => {
+    if (!offered || !claim || !release) return;
+    const self = claimant.current;
+    setLost(!claim(self));
+    return () => {
+      release(self);
+      setLost(false);
+    };
+  }, [offered, claim, release]);
+  if (!offered || lost) return NO_HEADER;
+  return { hosted: true, node: slot?.node ?? null };
+}
+
+export { CardHeaderSlotContext, useCardHeaderSlot };

package/dist/chunk-BHHIIK3M.js

@@ -0,0 +1,17 @@
+import { VisuallyHidden } from './chunk-BZFWDIV6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './Count-ZVCJ6VPD.css';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function Count({ value, label, className }) {
+  return /* @__PURE__ */ jsxs("span", { className: cx("crewlet-count", className), children: [
+    /* @__PURE__ */ jsx("span", { "aria-hidden": label ? true : void 0, children: value }),
+    label ? /* @__PURE__ */ jsxs(VisuallyHidden, { children: [
+      value,
+      " ",
+      label
+    ] }) : null
+  ] });
+}
+
+export { Count };

package/dist/chunk-BZFWDIV6.js

@@ -0,0 +1,9 @@
+import { cx } from './chunk-ODEQTPFM.js';
+import './VisuallyHidden-L552H7OA.css';
+import { jsx } from 'react/jsx-runtime';
+
+function VisuallyHidden({ as: Tag = "span", id, className, children }) {
+  return /* @__PURE__ */ jsx(Tag, { id, className: cx("crewlet-visually-hidden", className), children });
+}
+
+export { VisuallyHidden };

package/dist/chunk-BZYDZBAN.js

@@ -0,0 +1,123 @@
+import { VisuallyHidden } from './chunk-BZFWDIV6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './Button-D4J6B4MA.css';
+import { forwardRef, useId, Children, isValidElement, cloneElement } from 'react';
+import { OpenInNewGlyph } from '@crewlethq/icons/glyphs';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function buttonClass({ variant = "primary", size = "medium", shape = "square", block, className }, extra) {
+  return cx(
+    "crewlet-btn",
+    `crewlet-btn--${variant}`,
+    `crewlet-btn--${size}`,
+    `crewlet-btn--${shape}`,
+    block && "crewlet-btn--block",
+    extra,
+    className
+  );
+}
+function Inner({
+  leadingIcon,
+  trailingIcon,
+  loading,
+  children
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    loading ? /* @__PURE__ */ jsx("span", { className: "crewlet-btn__spinner", "aria-hidden": true }) : leadingIcon ? /* @__PURE__ */ jsx("span", { className: "crewlet-btn__icon", children: leadingIcon }) : null,
+    /* @__PURE__ */ jsx("span", { className: "crewlet-btn__label", children }),
+    trailingIcon ? /* @__PURE__ */ jsx("span", { className: "crewlet-btn__icon", children: trailingIcon }) : null
+  ] });
+}
+var Button = forwardRef(function Button2({
+  variant = "primary",
+  size = "medium",
+  shape = "square",
+  leadingIcon,
+  trailingIcon,
+  block,
+  className,
+  type = "button",
+  asChild = false,
+  loading = false,
+  pressed,
+  disabledReason,
+  disabled,
+  onClick,
+  title,
+  children,
+  ...rest
+}, ref) {
+  const reasonId = useId();
+  const look = { variant, size, shape, block, className};
+  const classes = buttonClass(look, loading ? "crewlet-btn--loading" : void 0);
+  if (asChild) {
+    const child = Children.only(children);
+    if (!isValidElement(child)) {
+      throw new Error("Button with asChild expects exactly one valid React element child.");
+    }
+    const childEl = child;
+    return cloneElement(
+      childEl,
+      { ...rest, title, className: cx(childEl.props["className"], classes) },
+      /* @__PURE__ */ jsx(Inner, { leadingIcon, trailingIcon, children: childEl.props["children"] })
+    );
+  }
+  const inert = loading || disabledReason !== void 0;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        ...rest,
+        ref,
+        type,
+        className: classes,
+        disabled,
+        title,
+        "aria-label": rest["aria-label"] ?? (children === void 0 ? title : void 0),
+        "aria-pressed": pressed,
+        "aria-busy": loading || void 0,
+        "aria-disabled": inert || void 0,
+        "aria-describedby": disabledReason === void 0 ? rest["aria-describedby"] : cx(rest["aria-describedby"], reasonId),
+        onClick: (event) => {
+          if (inert) {
+            event.preventDefault();
+            return;
+          }
+          onClick?.(event);
+        },
+        children: /* @__PURE__ */ jsx(Inner, { leadingIcon, trailingIcon, loading, children })
+      }
+    ),
+    disabledReason === void 0 ? null : /* @__PURE__ */ jsx(VisuallyHidden, { id: reasonId, children: disabledReason })
+  ] });
+});
+var ButtonLink = forwardRef(function ButtonLink2({
+  variant = "primary",
+  size = "medium",
+  shape = "square",
+  leadingIcon,
+  trailingIcon,
+  block,
+  className,
+  external = false,
+  title,
+  children,
+  ...rest
+}, ref) {
+  const trailing = trailingIcon ?? (external ? /* @__PURE__ */ jsx(OpenInNewGlyph, { size: "sm" }) : void 0);
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      ...rest,
+      ref,
+      className: buttonClass({ variant, size, shape, block, className }),
+      title,
+      "aria-label": rest["aria-label"] ?? (children === void 0 ? title : void 0),
+      target: external ? "_blank" : rest.target,
+      rel: external ? "noreferrer" : rest.rel,
+      children: /* @__PURE__ */ jsx(Inner, { leadingIcon, trailingIcon: trailing, children })
+    }
+  );
+});
+
+export { Button, ButtonLink };