@crewlethq/ui 0.2.0 → 0.3.0

package/dist/chunk-O6232G37.js

@@ -0,0 +1,273 @@
+import { useHeadingLevel, headingTag, HeadingLevelProvider, nextHeadingLevel } from './chunk-PQADV6P6.js';
+import { IconButton } from './chunk-F27EPQ7D.js';
+import { VisuallyHidden } from './chunk-BZFWDIV6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './Input-2PU5CPKK.css';
+import { forwardRef, useRef, useState, useImperativeHandle, useEffect, useId } from 'react';
+import { CloseGlyph } from '@crewlethq/icons/glyphs';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var Input = forwardRef(function Input2({
+  inputSize = "md",
+  appearance = "default",
+  width = "full",
+  error = false,
+  className = "",
+  containerClassName = "",
+  leading,
+  trailing,
+  onClear,
+  clearLabel = "Clear",
+  disabled,
+  ...rest
+}, ref) {
+  const field = useRef(null);
+  const [typed, setTyped] = useState(() => String(rest.defaultValue ?? "") !== "");
+  const controlled = rest.value !== void 0;
+  const filled = controlled ? String(rest.value ?? "") !== "" : typed;
+  const onChange = (event) => {
+    if (!controlled) setTyped(event.target.value !== "");
+    rest.onChange?.(event);
+  };
+  const clear = () => {
+    const node = field.current;
+    if (node && !controlled) {
+      node.value = "";
+      setTyped(false);
+    }
+    onClear?.();
+    node?.focus();
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx(
+        "crewlet-input",
+        `crewlet-input--${inputSize}`,
+        `crewlet-input--${appearance}`,
+        `crewlet-input--w-${width}`,
+        error && "is-error",
+        disabled && "is-disabled",
+        containerClassName
+      ),
+      children: [
+        leading ? /* @__PURE__ */ jsx("span", { className: "crewlet-input__leading", children: leading }) : null,
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: (el) => {
+              field.current = el;
+              if (typeof ref === "function") ref(el);
+              else if (ref) ref.current = el;
+            },
+            className: cx("crewlet-input__control", className),
+            disabled,
+            "aria-invalid": error || void 0,
+            ...rest,
+            ...onClear ? { onChange } : {}
+          }
+        ),
+        trailing ? /* @__PURE__ */ jsx("span", { className: "crewlet-input__trailing", children: trailing }) : null,
+        onClear && filled ? /* @__PURE__ */ jsx("span", { className: "crewlet-input__clear", children: /* @__PURE__ */ jsx(IconButton, { size: "sm", variant: "ghost", label: clearLabel, icon: /* @__PURE__ */ jsx(CloseGlyph, { size: "xs" }), onClick: clear, disabled }) }) : null
+      ]
+    }
+  );
+});
+function InputAffix({ text, id, sentence }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { className: "crewlet-input__affix", "aria-hidden": "true", children: text }),
+    /* @__PURE__ */ jsx(VisuallyHidden, { id, children: sentence ?? `Begins with ${text}` })
+  ] });
+}
+var Textarea = forwardRef(function Textarea2({ error = false, autoResize = false, trailing, className = "", value, disabled, ...rest }, ref) {
+  const localRef = useRef(null);
+  useImperativeHandle(ref, () => localRef.current);
+  useEffect(() => {
+    if (!autoResize) return;
+    const el = localRef.current;
+    if (!el) return;
+    el.style.height = "auto";
+    el.style.height = `${el.scrollHeight}px`;
+  }, [autoResize, value]);
+  const control = /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      ref: localRef,
+      className: cx(
+        "crewlet-textarea",
+        error && "is-error",
+        disabled && "is-disabled",
+        autoResize && "is-auto-resize",
+        className
+      ),
+      value,
+      disabled,
+      "aria-invalid": error || void 0,
+      ...rest
+    }
+  );
+  if (!trailing) return control;
+  return /* @__PURE__ */ jsxs("span", { className: "crewlet-textarea-shell", children: [
+    control,
+    /* @__PURE__ */ jsx("span", { className: "crewlet-input__trailing", children: trailing })
+  ] });
+});
+var Label = ({
+  as: Tag = "label",
+  required,
+  optional,
+  requiredNews,
+  action,
+  optionalLabel = "(optional)",
+  requiredLabel = "(required)",
+  className = "",
+  children,
+  ...rest
+}) => {
+  const marks = /* @__PURE__ */ jsxs(Fragment, { children: [
+    children,
+    required ? /* @__PURE__ */ jsx("span", { className: "crewlet-label__required", "aria-hidden": "true", children: "*" }) : null,
+    optional ? /* @__PURE__ */ jsxs("span", { className: "crewlet-label__note", children: [
+      " ",
+      optionalLabel
+    ] }) : null,
+    requiredNews ? /* @__PURE__ */ jsxs("span", { className: "crewlet-label__note", children: [
+      " ",
+      requiredLabel
+    ] }) : null
+  ] });
+  if (action) {
+    return /* @__PURE__ */ jsxs("div", { className: cx("crewlet-label", "crewlet-label--with-action", className), children: [
+      /* @__PURE__ */ jsx(Tag, { ...rest, className: "crewlet-label__text", children: marks }),
+      /* @__PURE__ */ jsx("span", { className: "crewlet-label__action", children: action })
+    ] });
+  }
+  return /* @__PURE__ */ jsx(Tag, { ...rest, className: cx("crewlet-label", className), children: marks });
+};
+var FormField = ({
+  label,
+  required = false,
+  optional,
+  requiredNews,
+  helper,
+  error,
+  labelAction,
+  as = "div",
+  describedBy,
+  htmlFor,
+  className = "",
+  children,
+  ...rest
+}) => {
+  const autoId = useId();
+  const id = htmlFor ?? autoId;
+  const helperId = helper ? `${id}-helper` : void 0;
+  const errorId = error ? `${id}-error` : void 0;
+  const extra = describedBy === void 0 ? [] : typeof describedBy === "string" ? [describedBy] : [...describedBy];
+  const described = [...extra, helperId, errorId].filter(Boolean).join(" ");
+  const field = {
+    id,
+    describedBy: described || void 0,
+    invalid: Boolean(error),
+    required
+  };
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    typeof children === "function" ? children(field) : children,
+    helper ? /* @__PURE__ */ jsx("div", { id: helperId, className: "crewlet-form-field__helper", children: helper }) : null,
+    error ? /* @__PURE__ */ jsx("div", { id: errorId, className: "crewlet-form-field__error", role: "alert", children: error }) : null
+  ] });
+  const classes = cx("crewlet-form-field", Boolean(error) && "is-error", className);
+  if (as === "fieldset") {
+    return (
+      /*
+       * THE GROUP CARRIES THE DESCRIPTION. There is no one control to hang it
+       * on (that is why this is a fieldset), so the sentences are attached to
+       * the group itself and read when a reader enters it.
+       */
+      /* @__PURE__ */ jsxs("fieldset", { ...rest, "aria-describedby": field.describedBy, className: classes, children: [
+        label !== void 0 ? /* @__PURE__ */ jsx("legend", { className: "crewlet-form-field__legend", children: /* @__PURE__ */ jsx(
+          Label,
+          {
+            as: "span",
+            required,
+            optional,
+            requiredNews,
+            action: labelAction,
+            children: label
+          }
+        ) }) : null,
+        body
+      ] })
+    );
+  }
+  return /* @__PURE__ */ jsxs("div", { ...rest, className: classes, children: [
+    label !== void 0 ? /* @__PURE__ */ jsx(
+      Label,
+      {
+        htmlFor: id,
+        required,
+        optional,
+        requiredNews,
+        action: labelAction,
+        children: label
+      }
+    ) : null,
+    body
+  ] });
+};
+var FormRow = ({ columns = 2, className = "", children, ...rest }) => {
+  const classes = ["crewlet-form-row", `crewlet-form-row--${columns}`, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("div", { ...rest, className: classes, children });
+};
+function FormSection({
+  title,
+  hint,
+  actions,
+  divided = false,
+  className = "",
+  children,
+  ...rest
+}) {
+  const id = useId();
+  const headingId = `${id}-heading`;
+  const level = useHeadingLevel();
+  const Heading = headingTag(level);
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      ...rest,
+      "aria-labelledby": headingId,
+      className: cx("crewlet-form-section", divided && "crewlet-form-section--divided", className),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "crewlet-form-section__header", children: [
+          /* @__PURE__ */ jsxs("div", { className: "crewlet-form-section__titles", children: [
+            /* @__PURE__ */ jsx(Heading, { id: headingId, className: "crewlet-form-section__title", children: title }),
+            hint ? /* @__PURE__ */ jsx("p", { className: "crewlet-form-section__hint", children: hint }) : null
+          ] }),
+          actions ? /* @__PURE__ */ jsx("div", { className: "crewlet-form-section__actions", children: actions }) : null
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "crewlet-form-section__body", children: /* @__PURE__ */ jsx(HeadingLevelProvider, { level: nextHeadingLevel(level), children }) })
+      ]
+    }
+  );
+}
+function ReadOnlyField({
+  label,
+  value,
+  reason,
+  action,
+  mono = false,
+  className = "",
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs("div", { ...rest, className: cx("crewlet-readonly-field", className), children: [
+    /* @__PURE__ */ jsx("span", { className: "crewlet-readonly-field__label", children: label }),
+    /* @__PURE__ */ jsx("span", { className: cx("crewlet-readonly-field__value", mono && "is-mono"), children: value }),
+    reason || action ? /* @__PURE__ */ jsxs("span", { className: "crewlet-readonly-field__reason", children: [
+      reason,
+      action ? /* @__PURE__ */ jsx("span", { className: "crewlet-readonly-field__action", children: action }) : null
+    ] }) : null
+  ] });
+}
+
+export { FormField, FormRow, FormSection, Input, InputAffix, Label, ReadOnlyField, Textarea };

package/dist/chunk-O67VF5MS.js

@@ -0,0 +1,58 @@
+import { VisuallyHidden } from './chunk-BZFWDIV6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './Timeline-27SYKOFX.css';
+import { createContext, Children, isValidElement, useContext } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var TimelineContext = createContext("Item");
+var TimelinePositionContext = createContext(null);
+function Timeline({
+  itemLabel = "Item",
+  alternating = false,
+  className,
+  children,
+  ...rest
+}) {
+  const items = Children.toArray(children).filter(isValidElement);
+  return /* @__PURE__ */ jsx(TimelineContext.Provider, { value: itemLabel, children: /* @__PURE__ */ jsx(
+    "ol",
+    {
+      ...rest,
+      className: cx("crewlet-timeline", alternating && "crewlet-timeline--alternating", className),
+      children: items.map((child, index) => /* @__PURE__ */ jsx(TimelinePositionContext.Provider, { value: index + 1, children: child }, child.key ?? index))
+    }
+  ) });
+}
+function TimelineItem({
+  state = "default",
+  marker,
+  label,
+  className,
+  children,
+  ...rest
+}) {
+  const itemLabel = useContext(TimelineContext);
+  const position = useContext(TimelinePositionContext);
+  if (position === null) {
+    throw new Error("Timeline.Item must be rendered inside a Timeline.");
+  }
+  const spoken = label ?? `${itemLabel} ${position}`;
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      ...rest,
+      className: cx("crewlet-timeline__item", `crewlet-timeline__item--${state}`, className),
+      "data-state": state,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "crewlet-timeline__rail", children: /* @__PURE__ */ jsx("span", { className: "crewlet-timeline__node", "aria-hidden": true, children: marker ?? position }) }),
+        /* @__PURE__ */ jsxs("div", { className: "crewlet-timeline__body", children: [
+          /* @__PURE__ */ jsx(VisuallyHidden, { children: spoken }),
+          children
+        ] })
+      ]
+    }
+  );
+}
+Timeline.Item = TimelineItem;
+
+export { Timeline, TimelineItem };

package/dist/chunk-ODEQTPFM.js

@@ -0,0 +1,6 @@
+// src/utils/cx.ts
+function cx(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+
+export { cx };

package/dist/chunk-PNFASD6F.js

@@ -0,0 +1,98 @@
+import { cx } from './chunk-ODEQTPFM.js';
+import './Avatar-P2KRQM2B.css';
+import { useState, useEffect } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var AVATAR_SIZES = { xs: 20, sm: 26, md: 32, lg: 40 };
+var getInitials = (name) => {
+  if (!name) return "?";
+  const words = name.trim().split(/[\s\-_.]+/).filter(Boolean);
+  if (words.length === 0) return "?";
+  return words.slice(0, 2).map((word) => (Array.from(word)[0] ?? "").toUpperCase()).join("") || "?";
+};
+var TINT_COUNT = 10;
+var avatarTint = (seed) => {
+  let hash = 0;
+  for (let i = 0; i < seed.length; i += 1) {
+    hash = hash * 31 + seed.charCodeAt(i) >>> 0;
+  }
+  return hash % TINT_COUNT;
+};
+function avatarPixels(size) {
+  return typeof size === "number" ? size : AVATAR_SIZES[size];
+}
+function avatarSquareCorner(pixels) {
+  if (pixels < 23) return "var(--radius-xs)";
+  if (pixels < 36) return "var(--radius-md)";
+  return "var(--radius-lg)";
+}
+var Avatar = ({
+  src,
+  name,
+  size = "md",
+  shape = "square",
+  tone = "neutral",
+  variant = "solid",
+  decorative = false,
+  colorSeed,
+  className,
+  style,
+  ...rest
+}) => {
+  const [imageFailed, setImageFailed] = useState(false);
+  useEffect(() => {
+    setImageFailed(false);
+  }, [src]);
+  const step = typeof size === "number" ? null : size;
+  const pixels = avatarPixels(size);
+  const measured = step === null ? {
+    width: pixels,
+    height: pixels,
+    fontSize: Math.max(9, Math.round(pixels * 0.36)),
+    // And its corner, for the same reason: the stylesheet's square steps
+    // move the radius with the box, so an arbitrary box that took one
+    // fixed step would be squarer or rounder than every step beside it.
+    ...shape === "square" ? { borderRadius: avatarSquareCorner(pixels) } : {}
+  } : {};
+  const seeded = tone === "seeded" ? avatarTint(colorSeed ?? name ?? "") : null;
+  const classes = cx(
+    "crewlet-avatar",
+    `crewlet-avatar--${shape}`,
+    step === null ? null : `crewlet-avatar--${step}`,
+    className
+  );
+  if (src && !imageFailed) {
+    return /* @__PURE__ */ jsx(
+      "img",
+      {
+        ...rest,
+        className: cx(classes, "crewlet-avatar--image", variant === "dashed" && "crewlet-avatar--dashed"),
+        style: { ...measured, ...style },
+        src,
+        alt: decorative ? "" : name ?? "",
+        "aria-hidden": decorative ? true : void 0,
+        onError: () => setImageFailed(true)
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ...rest,
+      className: cx(
+        classes,
+        "crewlet-avatar--fallback",
+        `crewlet-avatar--${tone}`,
+        variant === "dashed" && "crewlet-avatar--dashed",
+        seeded === null ? null : `crewlet-avatar--tint-${seeded}`
+      ),
+      style: { ...measured, ...style },
+      role: decorative ? void 0 : "img",
+      "aria-hidden": decorative ? true : void 0,
+      "aria-label": decorative ? void 0 : name ? `${name} avatar` : "Avatar",
+      children: getInitials(name)
+    }
+  );
+};
+
+export { AVATAR_SIZES, Avatar, avatarPixels, avatarSquareCorner, avatarTint, getInitials };

package/dist/chunk-PQADV6P6.js

@@ -0,0 +1,19 @@
+import { createContext, useContext } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+// src/utils/headingLevel.tsx
+var HeadingLevelContext = createContext(2);
+function HeadingLevelProvider({ level, children }) {
+  return /* @__PURE__ */ jsx(HeadingLevelContext.Provider, { value: level, children });
+}
+function useHeadingLevel() {
+  return useContext(HeadingLevelContext);
+}
+function nextHeadingLevel(level) {
+  return level < 6 ? level + 1 : 6;
+}
+function headingTag(level) {
+  return `h${level}`;
+}
+
+export { HeadingLevelProvider, headingTag, nextHeadingLevel, useHeadingLevel };

package/dist/chunk-PZSWF74H.js

@@ -0,0 +1,15 @@
+import { cx } from './chunk-ODEQTPFM.js';
+import './StatusDot-HA2L2FSX.css';
+import { jsx } from 'react/jsx-runtime';
+
+function StatusDot({ tone = "neutral", pulse = false, className }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": true,
+      className: cx("crewlet-status-dot", `crewlet-status-dot--${tone}`, pulse && "is-pulsing", className)
+    }
+  );
+}
+
+export { StatusDot };

package/dist/chunk-Q4ZPPART.js

@@ -0,0 +1,26 @@
+import { cx } from './chunk-ODEQTPFM.js';
+import './SearchTrigger-QXOYAUUY.css';
+import { forwardRef } from 'react';
+import { SearchGlyph } from '@crewlethq/icons/glyphs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var SearchTrigger = forwardRef(function SearchTrigger2({ label = "Search", shortcut, keyshortcuts, icon, className, type = "button", ...rest }, ref) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ...rest,
+      ref,
+      type,
+      className: cx("crewlet-search-trigger", className),
+      "aria-label": label,
+      "aria-keyshortcuts": keyshortcuts,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "crewlet-search-trigger__icon", children: icon ?? /* @__PURE__ */ jsx(SearchGlyph, { size: "sm" }) }),
+        /* @__PURE__ */ jsx("span", { className: "crewlet-search-trigger__label", children: label }),
+        shortcut ? /* @__PURE__ */ jsx("span", { className: "crewlet-search-trigger__shortcut", children: shortcut }) : null
+      ]
+    }
+  );
+});
+
+export { SearchTrigger };

package/dist/chunk-QNCVHRZL.js

@@ -0,0 +1,17 @@
+import { cx } from './chunk-ODEQTPFM.js';
+import './StatGroup-TGB6AEKM.css';
+import { jsx } from 'react/jsx-runtime';
+
+function StatGroup({ columns = 4, className, children, ...rest }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rest,
+      className: cx("crewlet-stat-group", className),
+      style: { "--crewlet-stat-group-cols": columns, ...rest.style },
+      children
+    }
+  );
+}
+
+export { StatGroup };

package/dist/chunk-QVE4GJAT.js

@@ -0,0 +1,15 @@
+import { cx } from './chunk-ODEQTPFM.js';
+import './Container-3TSKMGNI.css';
+import { jsx } from 'react/jsx-runtime';
+
+var Container = ({
+  size = "lg",
+  className,
+  children,
+  ...rest
+}) => {
+  const classes = cx("crewlet-container", `crewlet-container--${size}`, className);
+  return /* @__PURE__ */ jsx("div", { ...rest, className: classes, children });
+};
+
+export { Container };

package/dist/chunk-QYOFACSP.js

@@ -0,0 +1,36 @@
+import { Avatar } from './chunk-PNFASD6F.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './EntityChip-LUCPZBBG.css';
+import { Children, isValidElement, cloneElement } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function EntityChip({
+  name,
+  href,
+  asChild = false,
+  variant = "agent",
+  size = "sm",
+  className,
+  children,
+  ...rest
+}) {
+  const classes = cx("crewlet-entity-chip", href !== void 0 || asChild ? "crewlet-entity-chip--link" : null, className);
+  const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Avatar, { name, size, variant: variant === "human" ? "dashed" : "solid", decorative: true }),
+    /* @__PURE__ */ jsx("span", { className: "crewlet-entity-chip__name", children: name })
+  ] });
+  if (asChild) {
+    const child = Children.only(children);
+    if (!isValidElement(child)) {
+      throw new Error("EntityChip with asChild expects exactly one valid React element child.");
+    }
+    const element = child;
+    return cloneElement(element, { ...rest, className: cx(element.props["className"], classes) }, inner);
+  }
+  if (href !== void 0) {
+    return /* @__PURE__ */ jsx("a", { ...rest, className: classes, href, children: inner });
+  }
+  return /* @__PURE__ */ jsx("span", { ...rest, className: classes, children: inner });
+}
+
+export { EntityChip };

package/dist/chunk-RA2ULG6H.js

@@ -0,0 +1,29 @@
+import { useHeadingLevel, headingTag } from './chunk-PQADV6P6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './EmptyState-C6HRBGT7.css';
+import { InboxGlyph } from '@crewlethq/icons/glyphs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function EmptyState({
+  icon,
+  illustration,
+  title,
+  description,
+  action,
+  size = "default",
+  headingLevel,
+  className,
+  ...rest
+}) {
+  const contextLevel = useHeadingLevel();
+  const level = headingLevel ?? contextLevel;
+  const Heading = level === "none" ? "div" : headingTag(level);
+  return /* @__PURE__ */ jsxs("div", { ...rest, className: cx("crewlet-empty-state", `crewlet-empty-state--${size}`, className), children: [
+    /* @__PURE__ */ jsx("span", { className: "crewlet-empty-state__mark", "aria-hidden": true, children: illustration ?? icon ?? /* @__PURE__ */ jsx(InboxGlyph, { size: size === "compact" ? "xl" : 32 }) }),
+    /* @__PURE__ */ jsx(Heading, { className: "crewlet-empty-state__title", children: title }),
+    /* @__PURE__ */ jsx("p", { className: "crewlet-empty-state__description", children: description }),
+    action ? /* @__PURE__ */ jsx("div", { className: "crewlet-empty-state__action", children: action }) : null
+  ] });
+}
+
+export { EmptyState };