@luscii-healthtech/web-ui 58.4.0 → 58.6.0

package/dist/index.development.js

@@ -2556,8 +2556,22 @@ const LabelText = (props) => {
 };
 
 const StyledCheckbox = React__namespace.default.forwardRef((props, ref) => {
-  const { className } = props, attributes = __rest(props, ["className"]);
-  return jsxRuntime.jsx("input", Object.assign({ ref, type: "checkbox" }, attributes, { className: classNames__default.default(
+  const { className, indeterminate } = props, attributes = __rest(props, ["className", "indeterminate"]);
+  const inputRef = React__namespace.default.useRef(null);
+  const setRefs = React__namespace.default.useCallback((node) => {
+    inputRef.current = node;
+    if (typeof ref === "function") {
+      ref(node);
+    } else if (ref) {
+      ref.current = node;
+    }
+  }, [ref]);
+  React__namespace.default.useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.indeterminate = !!indeterminate;
+    }
+  });
+  return jsxRuntime.jsx("input", Object.assign({ ref: setRefs }, attributes, { type: "checkbox", className: classNames__default.default(
     "ui:block ui:appearance-none ui:w-6 ui:h-6 ui:rounded",
     "ui:cursor-pointer ui:disabled:cursor-not-allowed",
     // Default styles
@@ -2566,15 +2580,21 @@ const StyledCheckbox = React__namespace.default.forwardRef((props, ref) => {
     "ui:hover:border-border-neutral-primary-hovered",
     // Checked styles
     "ui:checked:bg-icon-brand-primary-default ui:checked:border-border-brand-primary-default ui:checked:before:scale-[1]",
+    // Indeterminate styles
+    "ui:indeterminate:bg-icon-brand-primary-default ui:indeterminate:border-border-brand-primary-default ui:indeterminate:before:scale-[1]",
     // Disabled styles
     "ui:disabled:border-border-neutral-primary-disabled",
     // Disabled and checked styles
     "ui:disabled:checked:bg-icon-brand-primary-disabled",
+    // Disabled and indeterminate styles
+    "ui:disabled:indeterminate:bg-icon-brand-primary-disabled",
     // Checked and hovered styles
     "ui:checked:hover:bg-icon-brand-primary-hover",
+    // Indeterminate and hovered styles
+    "ui:indeterminate:hover:bg-icon-brand-primary-hover",
     "ui:transition-colors ui:duration-150 ui:ease-in-out",
     "ui:before:content-[''] ui:before:block ui:before:w-full ui:before:h-full",
-    "ui:before:bg-[url('data:image/svg+xml;utf8,%3Csvg%20width%3D%2214%22%20height%3D%2211%22%20viewBox%3D%220%200%2014%2011%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M13.0421%200.43918C13.3233%200.720471%2013.4812%201.10193%2013.4812%201.49968C13.4812%201.89743%2013.3233%202.27889%2013.0421%202.56018L5.54207%2010.0602C5.26078%2010.3414%204.87931%2010.4994%204.48157%2010.4994C4.08382%2010.4994%203.70236%2010.3414%203.42107%2010.0602L0.421068%207.06018C0.147831%206.77728%20-0.00336092%206.39837%205.6704e-05%206.00508C0.00347433%205.61178%200.161228%205.23556%200.43934%204.95745C0.717452%204.67934%201.09367%204.52159%201.48697%204.51817C1.88026%204.51475%202.25916%204.66594%202.54207%204.93918L4.48157%206.87868L10.9211%200.43918C11.2024%200.157973%2011.5838%200%2011.9816%200C12.3793%200%2012.7608%200.157973%2013.0421%200.43918Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E')] ui:before:bg-center ui:before:bg-no-repeat",
+    "ui:not-indeterminate:before:bg-[url('data:image/svg+xml;utf8,%3Csvg%20width%3D%2214%22%20height%3D%2211%22%20viewBox%3D%220%200%2014%2011%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M13.0421%200.43918C13.3233%200.720471%2013.4812%201.10193%2013.4812%201.49968C13.4812%201.89743%2013.3233%202.27889%2013.0421%202.56018L5.54207%2010.0602C5.26078%2010.3414%204.87931%2010.4994%204.48157%2010.4994C4.08382%2010.4994%203.70236%2010.3414%203.42107%2010.0602L0.421068%207.06018C0.147831%206.77728%20-0.00336092%206.39837%205.6704e-05%206.00508C0.00347433%205.61178%200.161228%205.23556%200.43934%204.95745C0.717452%204.67934%201.09367%204.52159%201.48697%204.51817C1.88026%204.51475%202.25916%204.66594%202.54207%204.93918L4.48157%206.87868L10.9211%200.43918C11.2024%200.157973%2011.5838%200%2011.9816%200C12.3793%200%2012.7608%200.157973%2013.0421%200.43918Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E')] ui:indeterminate:before:bg-[url('data:image/svg+xml;utf8,%3Csvg%20width%3D%2210%22%20height%3D%222%22%20viewBox%3D%220%200%2010%202%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M9%20-4.37114e-08C9.55228%20-1.95703e-08%2010%200.447715%2010%201C10%201.55228%209.55228%202%209%202L1%202C0.447716%202%20-6.78525e-08%201.55228%20-4.37114e-08%201C-1.95703e-08%200.447715%200.447715%20-4.17544e-07%201%20-3.93402e-07L9%20-4.37114e-08Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E')] ui:before:bg-center ui:before:bg-no-repeat",
     "ui:before:scale-[0] ui:before:transition-[scale] ui:before:duration-200 ui:before:ease-[cubic-bezier(.17,.67,.16,1.5)]",
     className
   ) }));
@@ -3864,46 +3884,25 @@ var CheckboxState;
 })(CheckboxState || (CheckboxState = {}));
 
 const CheckboxGroup = ({ title, items, onChange, onStateChange, className, isCollapsed = true, collapsible = true }) => {
-  const [groupCheckboxState, setGroupCheckboxState] = React.useState(CheckboxState.UNCHECKED);
+  const groupCheckboxId = React__namespace.default.useId();
   const [collapsed, setCollapsed] = React.useState(collapsible ? isCollapsed : false);
-  const [isDisabled, setIsDisabled] = React.useState(false);
-  React.useEffect(() => {
-    if (items.length === 0) {
-      return;
-    }
-    const enabledItems = items.filter((item) => !item.isDisabled);
-    const allItemsChecked = items.every((item) => item.isChecked);
-    if (enabledItems.length === 0) {
-      setGroupCheckboxState(allItemsChecked ? CheckboxState.CHECKED : CheckboxState.UNCHECKED);
-      setIsDisabled(true);
-      return;
-    }
-    const indeterminate = enabledItems.some((item) => item.isChecked !== enabledItems[0].isChecked);
-    if (indeterminate) {
-      setGroupCheckboxState(CheckboxState.INDETERMINATE);
-      return;
-    }
-    if (enabledItems[0].isChecked) {
-      setGroupCheckboxState(CheckboxState.CHECKED);
-    } else if (!enabledItems[0].isChecked) {
-      setGroupCheckboxState(CheckboxState.UNCHECKED);
-    }
-    setIsDisabled(!enabledItems.some((item) => !item.isDisabled));
-  }, [items]);
+  const enabledItems = items.filter((item) => !item.isDisabled);
+  const isDisabled = items.length > 0 && enabledItems.length === 0;
+  const groupCheckboxState = getGroupCheckboxState({ items, enabledItems });
   const handleGroupClick = (event) => {
     event.stopPropagation();
-    const enabledItems = [];
+    const itemsToChange = [];
     const newState = [];
     items.forEach((item) => {
       if (item.isDisabled) {
         newState.push(item);
         return;
       }
-      enabledItems.push(item);
+      itemsToChange.push(item);
       newState.push(Object.assign(Object.assign({}, item), { isChecked: event.currentTarget.checked }));
     });
     const newCheckedValue = event.currentTarget.checked;
-    enabledItems.forEach((item) => onChange === null || onChange === void 0 ? void 0 : onChange({ id: item.id, newCheckedValue }));
+    itemsToChange.forEach((item) => onChange === null || onChange === void 0 ? void 0 : onChange({ id: item.id, newCheckedValue }));
     onStateChange === null || onStateChange === void 0 ? void 0 : onStateChange(newState);
   };
   const handleGroupCollapse = (event) => {
@@ -3913,6 +3912,7 @@ const CheckboxGroup = ({ title, items, onChange, onStateChange, className, isCol
     }
   };
   const handleCheckboxChange = (e) => {
+    e.stopPropagation();
     onChange === null || onChange === void 0 ? void 0 : onChange({
       id: e.target.id,
       newCheckedValue: e.target.checked
@@ -3926,14 +3926,31 @@ const CheckboxGroup = ({ title, items, onChange, onStateChange, className, isCol
   };
   const checkedItemsCount = items === null || items === void 0 ? void 0 : items.filter((item) => item === null || item === void 0 ? void 0 : item.isChecked).length;
   const groupTitle = checkedItemsCount > 0 ? `${title} (${checkedItemsCount})` : title;
-  return jsxRuntime.jsxs("div", { className: classNames__default.default("ui:flex ui:flex-col", className), children: [title && jsxRuntime.jsxs("div", { className: "ui:flex ui:w-full ui:flex-row ui:items-center", children: [jsxRuntime.jsx(Checkbox, { renderLabel: () => jsxRuntime.jsx(Text, { variant: "strong", children: groupTitle }), onChange: handleGroupClick, isChecked: groupCheckboxState === CheckboxState.CHECKED, isDisabled, isIndeterminate: groupCheckboxState === CheckboxState.INDETERMINATE, className: "ui:flex-1 ui:py-3" }, title), collapsible && jsxRuntime.jsx(GroupCollapseButton, { "aria-label": getGroupCollapseButtonAriaLabel({
+  return jsxRuntime.jsxs("div", { className: classNames__default.default("ui:flex ui:flex-col", className), children: [title && jsxRuntime.jsxs("div", { className: "ui:flex ui:w-full ui:flex-row ui:items-center", children: [jsxRuntime.jsx(LabeledCheckbox, { id: groupCheckboxId, onChange: handleGroupClick, checked: groupCheckboxState === CheckboxState.CHECKED, indeterminate: groupCheckboxState === CheckboxState.INDETERMINATE, disabled: isDisabled, className: "ui:flex-1 ui:py-3", children: jsxRuntime.jsx(Text, { as: "span", variant: "strong", children: groupTitle }) }), collapsible && jsxRuntime.jsx(GroupCollapseButton, { "aria-label": getGroupCollapseButtonAriaLabel({
     groupTitle: title,
     collapsed
-  }), collapsed, type: "button", onClick: handleGroupCollapse })] }), !collapsed && items.map((item) => React.createElement(Checkbox, Object.assign({}, item, { key: item.id, text: item.label, onChange: handleCheckboxChange, className: classNames__default.default("ui:py-3", {
-    "ui:ml-10": collapsible,
-    "ui:ml-5": !collapsible
-  }) })))] });
+  }), collapsed, type: "button", onClick: handleGroupCollapse })] }), !collapsed && items.map((item) => {
+    var _a;
+    return jsxRuntime.jsx(LabeledCheckbox, { id: item.id, name: item.name, value: item.value, label: item.label, helperText: item.explanation, checked: (_a = item.isChecked) !== null && _a !== void 0 ? _a : false, disabled: item.isDisabled, onChange: handleCheckboxChange, className: classNames__default.default("ui:py-3", {
+      "ui:ml-10": collapsible,
+      "ui:ml-5": !collapsible
+    }, item.className) }, item.id);
+  })] });
 };
+function getGroupCheckboxState(args) {
+  const { items, enabledItems } = args;
+  if (items.length === 0) {
+    return CheckboxState.UNCHECKED;
+  }
+  if (enabledItems.length === 0) {
+    return items.every((item) => item.isChecked) ? CheckboxState.CHECKED : CheckboxState.UNCHECKED;
+  }
+  const isIndeterminate = enabledItems.some((item) => item.isChecked !== enabledItems[0].isChecked);
+  if (isIndeterminate) {
+    return CheckboxState.INDETERMINATE;
+  }
+  return enabledItems[0].isChecked ? CheckboxState.CHECKED : CheckboxState.UNCHECKED;
+}
 function getGroupCollapseButtonAriaLabel(args) {
   const { groupTitle, collapsed } = args;
   const localizedActionLabel = collapsed ? "Expand" : "Collapse";
@@ -3956,6 +3973,7 @@ function GroupCollapseButton(props) {
 
 const CheckboxList = ({ groups, onChange, onStateChange, className }) => {
   const handleCheckboxChange = (e) => {
+    e.stopPropagation();
     onChange === null || onChange === void 0 ? void 0 : onChange({
       id: e.target.id,
       newCheckedValue: e.target.checked
@@ -3984,7 +4002,10 @@ const CheckboxList = ({ groups, onChange, onStateChange, className }) => {
       const groupTitle = group.title;
       return jsxRuntime.jsx(CheckboxGroup, { items: group.items, title: group.title, isCollapsed: group.isCollapsed, collapsible: group.collapsible, onChange, onStateChange: (items) => handleGroupChange({ groupTitle, items }) }, group.title);
     } else {
-      return group.items.map((item) => React.createElement(Checkbox, Object.assign({}, item, { key: item.id, text: item.label, onChange: handleCheckboxChange, classNameCheckboxLabel: "ui:py-3" })));
+      return group.items.map((item) => {
+        var _a;
+        return jsxRuntime.jsx(LabeledCheckbox, { id: item.id, name: item.name, value: item.value, label: item.label, helperText: item.explanation, checked: (_a = item.isChecked) !== null && _a !== void 0 ? _a : false, disabled: item.isDisabled, onChange: handleCheckboxChange, className: classNames__default.default("ui:py-3", item.className) }, item.id);
+      });
     }
   }) });
 };
@@ -5121,6 +5142,32 @@ const ActionCard = ({ type, title, metadata, instruments, actions, draggable = f
   }) })] }), 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);
 
@@ -7212,6 +7259,7 @@ exports.AccordionTemporary = Accordion;
 exports.ActionBloodPressureColoredIcon = ActionBloodPressureColoredIcon;
 exports.ActionCalculationColoredIcon = ActionCalculationColoredIcon;
 exports.ActionCard = ActionCard;
+exports.ActionCardDetailed = ActionCardDetailed;
 exports.ActionContactColoredIcon = ActionContactColoredIcon;
 exports.ActionController = ActionController;
 exports.ActionHeartRateColoredIcon = ActionHeartRateColoredIcon;