@luscii-healthtech/web-ui 58.2.5 → 58.4.0

package/dist/index.development.js

@@ -5050,6 +5050,77 @@ const MediaPicker = React__namespace.default.forwardRef((props, ref) => {
 
 const TagGroup = ({ children, tags, tagSize = "large", className }) => jsxRuntime.jsxs("div", { className: classNames__default.default("ui:flex ui:flex-row ui:flex-wrap ui:gap-2", className), children: [children, tags === null || tags === void 0 ? void 0 : tags.map((tag) => jsxRuntime.jsx(Tag, Object.assign({ _size: tagSize }, tag)))] });
 
+const typeIcons$1 = {
+  info: BookOpenIcon,
+  questionnaire: ClipboardListIcon,
+  numeric: HashIcon,
+  document: DocumentLinesIcon,
+  contact: PersonIcon,
+  other: CircleEllipsisIcon,
+  scripted: SigmaSquareIcon,
+  sum: SigmaSquareIcon
+};
+const InstrumentCard = ({ type, title, category, meta, id, count, variant = "compact", state = "default", errorMessage, className }) => {
+  const isDetailed = variant === "detailed";
+  const isError = state === "error";
+  const TypeIcon = isError ? ExclamationMarkIcon : typeIcons$1[type];
+  const textColor = isError ? "error" : "neutral";
+  if (!isDetailed) {
+    return jsxRuntime.jsxs(Stack, { axis: "x", align: "center", _gap: "base", _py: "base", _pl: "base", _pr: "m", className: classNames__default.default("ui:inline-flex ui:bg-background-neutral-primary-default ui:[border-radius:var(--ui-semantic-radius-m)]", className), children: [jsxRuntime.jsx(TypeIcon, { "aria-hidden": true, width: 14, height: 14, className: classNames__default.default("ui:shrink-0", {
+      "ui:text-icon-error-primary-default": isError,
+      "ui:text-icon-brand-primary-default": !isError
+    }) }), jsxRuntime.jsx(Text, { variant: "body-small-regular", color: textColor, children: isError ? errorMessage : title })] });
+  }
+  return jsxRuntime.jsxs(Stack, { axis: "x", align: "start", justify: "between", width: "full", _py: "m", _pl: "m", _pr: "base", className: classNames__default.default("ui:bg-background-neutral-primary-default ui:[border-radius:var(--ui-semantic-radius-m)]", className), children: [jsxRuntime.jsxs(Stack, { axis: "x", _gap: "base", className: "ui:min-w-0 ui:flex-1", children: [jsxRuntime.jsx(Box, { _py: "xs", className: "ui:shrink-0", children: jsxRuntime.jsx(TypeIcon, { "aria-hidden": true, width: 16, height: 16, className: classNames__default.default({
+    "ui:text-icon-error-primary-default": isError,
+    "ui:text-icon-brand-primary-default": !isError
+  }) }) }), jsxRuntime.jsxs(Stack, { _gap: "base", className: "ui:min-w-0 ui:flex-1", children: [jsxRuntime.jsx(Text, { variant: "body-medium-regular", color: textColor, truncate: true, className: "ui:min-w-0", children: title }), isError && jsxRuntime.jsx(Text, { variant: "body-small-regular", color: "error", children: errorMessage }), !isError && (category || meta) && jsxRuntime.jsxs(Stack, { axis: "x", align: "center", children: [category && jsxRuntime.jsx(Text, { variant: "body-small-regular", color: "neutral", children: category }), category && meta && jsxRuntime.jsx(Box, { _mx: "base", className: "ui:h-[12px] ui:w-px ui:shrink-0 ui:bg-border-neutral-primary-default" }), meta && jsxRuntime.jsx(Text, { variant: "body-small-regular", color: "neutral", children: meta })] }), id && jsxRuntime.jsx(Tag, { _size: "small", _variant: "bordered", _leadingIcon: jsxRuntime.jsx(CopyToClipboardIcon, { "aria-hidden": true }), children: id })] })] }), count !== void 0 && jsxRuntime.jsx(Tag, { _size: "small", _variant: "flat", _leadingIcon: jsxRuntime.jsx(CopyToClipboardIcon, { "aria-hidden": true }), className: "ui:shrink-0", children: jsxRuntime.jsx(Text, { variant: "body-small-bold", as: "span", children: count }) })] });
+};
+
+const variantClasses = {
+  h1: "ui-typo-h1 ui:text-text-brand-primary-default",
+  h2: "ui-typo-h2 ui:text-text-neutral-primary-default",
+  h3: "ui-typo-h3 ui:text-text-neutral-primary-default",
+  h4: "ui-typo-h4 ui:text-text-neutral-primary-default"
+};
+const Heading = (_a) => {
+  var { as: Element = "h2", variant = "h2", className, children } = _a, rest = __rest(_a, ["as", "variant", "className", "children"]);
+  return jsxRuntime.jsx(Element, Object.assign({ className: classNames__default.default(variantClasses[variant], className) }, rest, { children }));
+};
+
+const typeIcons = {
+  information: ActionInformationColoredIcon,
+  contact: ActionContactColoredIcon,
+  lesson: ActionLessonColoredIcon,
+  calculation: ActionCalculationColoredIcon,
+  measurement: ActionBloodPressureColoredIcon
+};
+const ActionCard = ({ type, title, metadata, instruments, actions, draggable = false, titleAs = "h3", variant = "default", onClick, className }) => {
+  const TypeIcon = typeIcons[type];
+  const isCompact = variant === "compact";
+  const isList = variant === "list";
+  return jsxRuntime.jsx(Card, { borderRadius: "m", elevation: isList ? "surface" : "small", elevationOnHover: isList ? void 0 : "medium", padding: false, className: classNames__default.default("ui:w-full", className), children: jsxRuntime.jsxs(Stack, { axis: "x", align: "start", justify: "between", _gap: "base", _p: "l", children: [draggable && jsxRuntime.jsx(Box, { className: "ui:relative ui:z-[1] ui:shrink-0 ui:self-center", children: jsxRuntime.jsx(DragHandle, { grabbing: false }) }), jsxRuntime.jsxs(Stack, { _gap: isCompact ? "s" : "m", className: "ui:min-w-0 ui:flex-1", children: [jsxRuntime.jsxs(Stack, { axis: "x", align: "center", _gap: "base", children: [jsxRuntime.jsx(TypeIcon, { "aria-hidden": true, width: 20, height: 20, className: "ui:shrink-0" }), jsxRuntime.jsx(Heading, { as: titleAs, variant: "h4", className: "ui:min-w-0", children: onClick ? (
+    /**
+     * The whole card is the click target, but it cannot be a
+     * `<button>` because the `actions` slot and the drag handle
+     * are interactive themselves and nesting them inside a button
+     * is invalid HTML. Instead a real button wraps the title and
+     * stretches an `::after` overlay across the card, which keeps
+     * the component keyboard accessible and gives it an
+     * announceable name. Interactive slots opt out by sitting
+     * above the overlay.
+     */
+    jsxRuntime.jsx("button", { type: "button", onClick, className: "ui:cursor-pointer ui:text-left ui:after:absolute ui:after:inset-0 ui:after:content-[''] ui:focus:outline-primary", children: title })
+  ) : title })] }), metadata && metadata.length > 0 && jsxRuntime.jsx(Stack, { axis: "x", _gap: "base", wrap: !isCompact, children: metadata.map(({ label, bordered }, index) => jsxRuntime.jsx(
+    Tag,
+    { _size: "small", _type: "neutral", _variant: bordered ? "bordered" : "flat", _truncate: isCompact, children: label },
+    `${index}-${label}`
+  )) }), !isCompact && instruments && instruments.length > 0 && jsxRuntime.jsx(Stack, { axis: "x", _gap: "base", wrap: true, children: instruments.map((instrument) => {
+    var _a;
+    return React.createElement(InstrumentCard, Object.assign({}, instrument, { variant: "compact", key: (_a = instrument.id) !== null && _a !== void 0 ? _a : `${instrument.type}-${instrument.title}` }));
+  }) })] }), actions && jsxRuntime.jsx(Box, { className: "ui:relative ui:z-[1] ui:shrink-0 ui:self-center", children: actions })] }) });
+};
+
 var css_248z$1 = "/*! tailwindcss v4.1.12 | MIT License | https://tailwindcss.com */\n.cweb-textarea {\n  resize: none;\n  background-color: field;\n}\n.cweb-textarea.has-icon {\n  background-size: 24px;\n  background-position: 10px 10px;\n  background-repeat: no-repeat;\n  padding-left: 44px;\n}\n.cweb-textarea.resizable {\n  resize: both;\n}\n.cweb-textarea.resizable-x {\n  resize: horizontal;\n}\n.cweb-textarea.resizable-y {\n  resize: vertical;\n}\n.cweb-textarea:focus {\n  border-color: var(--color-primary);\n}\n.cweb-textarea:disabled {\n  cursor: not-allowed;\n}\n.cweb-textarea.has-error {\n  border: 1px solid #b91c1c;\n  color: #991b1b;\n}";
 styleInject(css_248z$1);
 
@@ -5614,17 +5685,6 @@ const TextLink = (props) => {
   return jsxRuntime.jsx("a", { href: props.href, rel: props.rel, target: props.target, onClick: props.onClick, className: classNames__default.default(className, props.className), children: props.text });
 };
 
-const variantClasses = {
-  h1: "ui-typo-h1 ui:text-text-brand-primary-default",
-  h2: "ui-typo-h2 ui:text-text-neutral-primary-default",
-  h3: "ui-typo-h3 ui:text-text-neutral-primary-default",
-  h4: "ui-typo-h4 ui:text-text-neutral-primary-default"
-};
-const Heading = (_a) => {
-  var { as: Element = "h2", variant = "h2", className, children } = _a, rest = __rest(_a, ["as", "variant", "className", "children"]);
-  return jsxRuntime.jsx(Element, Object.assign({ className: classNames__default.default(variantClasses[variant], className) }, rest, { children }));
-};
-
 const TimelineStep = React__namespace.default.forwardRef(({ content, type = "base", dataTestId, title }, ref) => {
   const isWideStep = type === "wide";
   const borderClassNames = "ui:ml-4 ui:pl-6 ui:border-primary ui:border-l-2";
@@ -7151,6 +7211,7 @@ exports.AccordionList = AccordionList;
 exports.AccordionTemporary = Accordion;
 exports.ActionBloodPressureColoredIcon = ActionBloodPressureColoredIcon;
 exports.ActionCalculationColoredIcon = ActionCalculationColoredIcon;
+exports.ActionCard = ActionCard;
 exports.ActionContactColoredIcon = ActionContactColoredIcon;
 exports.ActionController = ActionController;
 exports.ActionHeartRateColoredIcon = ActionHeartRateColoredIcon;
@@ -7288,6 +7349,7 @@ exports.InfoField = InfoField;
 exports.InfoIcon = InfoIcon;
 exports.Input = Input;
 exports.InputSelect = InputSelectWithSubComponents;
+exports.InstrumentCard = InstrumentCard;
 exports.LabelText = LabelText;
 exports.LabeledCheckbox = LabeledCheckbox;
 exports.LabeledCheckboxCard = LabeledCheckboxCard;