@luscii-healthtech/web-ui 58.3.0 → 58.5.0

package/dist/index.development.js

@@ -5050,7 +5050,7 @@ 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 = {
+const typeIcons$1 = {
   info: BookOpenIcon,
   questionnaire: ClipboardListIcon,
   numeric: HashIcon,
@@ -5063,7 +5063,7 @@ const typeIcons = {
 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[type];
+  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", {
@@ -5077,6 +5077,76 @@ const InstrumentCard = ({ type, title, category, meta, id, count, variant = "com
   }) }) }), 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 })] }) });
+};
+
+const actionIcons = {
+  information: ActionInformationColoredIcon,
+  contact: ActionContactColoredIcon,
+  lesson: ActionLessonColoredIcon,
+  calculation: ActionCalculationColoredIcon,
+  measurement: ActionBloodPressureColoredIcon
+};
+const ScheduleItem = ({ icon, label, value, detail }) => jsxRuntime.jsxs(Stack, { axis: "x", align: "start", _gap: "base", children: [jsxRuntime.jsx(Box, { "aria-hidden": true, _p: "s", className: "ui:size-[var(--ui-semantic-size-xl)] ui:shrink-0 ui:[border-radius:var(--ui-semantic-radius-s)]", children: icon }), jsxRuntime.jsxs(Stack, { _gap: "none", className: "ui:min-w-0", children: [jsxRuntime.jsxs(Stack, { axis: "x", align: "baseline", _gap: "s", wrap: true, children: [jsxRuntime.jsx(Text, { variant: "body-base-light", color: "neutral-secondary", children: label }), jsxRuntime.jsx(Text, { variant: "body-base-regular", color: "neutral-secondary", children: value })] }), detail && jsxRuntime.jsx(Text, { variant: "body-small-regular", color: "neutral-secondary", children: detail })] })] });
+const ActionCardDetailed = ({ type, title, category, metadata, schedule, scheduleHeading = "Schedule settings", instruments, instrumentsHeading = "Instruments in this action", onEdit, onDelete, onClose, className }) => {
+  const ActionIcon = actionIcons[type];
+  const hasActions = onEdit || onDelete || onClose;
+  return jsxRuntime.jsx(Card, { border: true, borderRadius: "m", elevation: "medium", className: classNames__default.default("ui:w-full ui:max-w-[600px]", className), children: jsxRuntime.jsxs(Stack, { _gap: "xl", width: "full", children: [jsxRuntime.jsxs(Stack, { axis: "x", align: "start", justify: "between", _gap: "base", width: "full", children: [jsxRuntime.jsxs(Stack, { axis: "x", align: "start", _gap: "base", className: "ui:min-w-0", children: [jsxRuntime.jsx(ActionIcon, { "aria-hidden": true, width: 24, height: 24, className: "ui:shrink-0" }), jsxRuntime.jsxs(Stack, { _gap: "none", className: "ui:min-w-0", children: [jsxRuntime.jsx(Heading, { variant: "h3", children: title }), category && jsxRuntime.jsx(Text, { variant: "body-base-regular", color: "neutral-secondary", children: category })] })] }), hasActions && jsxRuntime.jsxs(Stack, { axis: "x", align: "center", _gap: "base", className: "ui:shrink-0", children: [onEdit && jsxRuntime.jsx(TertiaryIconButton, { label: "Edit action", onClick: onEdit, children: jsxRuntime.jsx(PencilIcon, { "aria-hidden": true }) }), onDelete && jsxRuntime.jsx(TertiaryIconButton, { label: "Delete action", onClick: onDelete, children: jsxRuntime.jsx(TrashBinIcon, { "aria-hidden": true }) }), onClose && jsxRuntime.jsx(TertiaryIconButton, { label: "Close action details", onClick: onClose, children: jsxRuntime.jsx(CrossIcon, { "aria-hidden": true }) })] })] }), metadata && metadata.length > 0 && jsxRuntime.jsx(Stack, { axis: "x", _gap: "base", wrap: true, children: metadata.map((item, index) => jsxRuntime.jsx(
+    Tag,
+    { _size: "large", _type: "neutral", _variant: "flat", children: item },
+    `${index}-${item}`
+  )) }), schedule && schedule.length > 0 && jsxRuntime.jsxs(Stack, { _gap: "base", width: "full", children: [jsxRuntime.jsx(Heading, { variant: "h4", children: scheduleHeading }), jsxRuntime.jsx(Stack, { _gap: "l", width: "full", children: schedule.map((row, index) => jsxRuntime.jsx(
+    ScheduleItem,
+    Object.assign({}, row),
+    index
+  )) })] }), instruments && instruments.length > 0 && jsxRuntime.jsxs(Stack, { _gap: "base", width: "full", children: [jsxRuntime.jsx(Heading, { variant: "h4", children: instrumentsHeading }), jsxRuntime.jsx(Stack, { _gap: "base", width: "full", children: instruments.map((instrument, index) => jsxRuntime.jsx(
+    InstrumentCard,
+    Object.assign({}, instrument, { variant: "detailed" }),
+    index
+  )) })] })] }) });
+};
+
 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);
 
@@ -5641,17 +5711,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";
@@ -7178,6 +7237,8 @@ exports.AccordionList = AccordionList;
 exports.AccordionTemporary = Accordion;
 exports.ActionBloodPressureColoredIcon = ActionBloodPressureColoredIcon;
 exports.ActionCalculationColoredIcon = ActionCalculationColoredIcon;
+exports.ActionCard = ActionCard;
+exports.ActionCardDetailed = ActionCardDetailed;
 exports.ActionContactColoredIcon = ActionContactColoredIcon;
 exports.ActionController = ActionController;
 exports.ActionHeartRateColoredIcon = ActionHeartRateColoredIcon;