@luscii-healthtech/web-ui 44.0.1 → 44.1.0

package/dist/index.development.js

@@ -2420,6 +2420,69 @@ function Label(props) {
 }
 const Checkbox = React__namespace.default.forwardRef((props, ref) => jsxRuntime.jsx(CheckboxInner, Object.assign({}, props, { innerRef: ref })));
 
+const HelperAndErrorText = (props) => {
+  const showHelperText = Boolean(props.helperText) && !props.errorText;
+  if (showHelperText) {
+    return jsxRuntime.jsx(Box, { id: props.describingId, children: jsxRuntime.jsx(Text, { variant: "sm", color: "slate-500", children: props.helperText }) });
+  }
+  return jsxRuntime.jsx(Box, { id: props.describingId, children: props.errorText && jsxRuntime.jsx(Text, { variant: "sm", color: "red", children: props.errorText }) });
+};
+
+const LabelText = (props) => {
+  return jsxRuntime.jsx(Text, Object.assign({}, 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(
+    "ui:appearance-none ui:w-6 ui:h-6 ui:rounded",
+    "ui:cursor-pointer ui:disabled:cursor-not-allowed",
+    // Default styles
+    "ui:border ui:border-border-neutral-primary-default ui:bg-white",
+    // Hovered styles
+    "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]",
+    // Disabled styles
+    "ui:disabled:border-border-neutral-primary-disabled",
+    // Disabled and checked styles
+    "ui:disabled:checked:bg-background-brand-primary-disabled",
+    // Checked and hovered styles
+    "ui:checked: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:before:scale-[0] ui:before:transition-[scale] ui:before:duration-200 ui:before:ease-[cubic-bezier(.17,.67,.16,1.5)]",
+    className
+  ) }));
+});
+
+const LabeledCheckbox = React__namespace.default.forwardRef((props, ref) => {
+  const { children, label, helperText, errorText, className, inputClassName } = props, attributes = __rest(props, ["children", "label", "helperText", "errorText", "className", "inputClassName"]);
+  const { id, disabled } = attributes;
+  const semanticId = React__namespace.default.useId();
+  return jsxRuntime.jsxs(Stack, { as: "label", axis: "x", gap: "xs", htmlFor: id, className: classNames__default.default("ui:cursor-pointer", {
+    "ui:cursor-not-allowed": disabled
+  }, className), children: [jsxRuntime.jsx("div", { className: "ui:flex ui:flex-row", children: jsxRuntime.jsx("div", { children: jsxRuntime.jsx(StyledCheckbox, Object.assign({ "aria-describedby": semanticId }, attributes, { ref, className: inputClassName })) }) }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(LabelText, { className: classNames__default.default(
+    /**
+     * Need a slight top margin to align with the checkbox indicator (height 24px). On
+     * small screens the text is larger (line-height: 24px). That matches the indicator
+     * height exactly, so no margin is needed there. On larger screens the line-height
+     * is 20px, so we add a small margin-top to center the first line of text to the indicator.
+     */
+    "ui:sm:mt-[2px]",
+    {
+      "ui:text-text-neutral-secondary-disabled": disabled
+    }
+  ), children: children || label }), jsxRuntime.jsx(HelperAndErrorText, { helperText, errorText, describingId: semanticId })] })] });
+});
+
+const LabeledCheckboxGroup = (props) => {
+  const { children, title, className } = props;
+  const semanticId = React__namespace.default.useId();
+  return jsxRuntime.jsxs(Stack, { as: "fieldset", "aria-describedby": semanticId, className: classNames__default.default(className), gap: "xxs", children: [title && jsxRuntime.jsx("legend", { className: "ui:contents", children: jsxRuntime.jsx(Text, { children: title }) }), jsxRuntime.jsx(Stack, { gap: "m", children }), jsxRuntime.jsx(HelperAndErrorText, { helperText: props.helperText, errorText: props.errorText, describingId: semanticId })] });
+};
+
 const Chip = ({ accessory, leadingIcon, onClick, text }) => {
   return jsxRuntime.jsx(SecondaryButton, { className: "ui:bg-transparent! ui:px-s! ui:radius-xxxxs!", onClick, leadingIcon, trailingIcon: accessory, children: text });
 };
@@ -2469,14 +2532,6 @@ const NotificationBanner = (_a) => {
   }), "data-test-id": "notification-text", color: colour, children: text }), linkProps && jsxRuntime.jsx(Link, { "data-test-id": "notification-text-link", "aria-disabled": !linkProps.enabled, rel: "noopener", target: "_blank", onClick: linkProps.handleClick, children: linkProps.text })] })] })] }));
 };
 
-const HelperAndErrorText = (props) => {
-  const showHelperText = Boolean(props.helperText) && !props.errorText;
-  if (showHelperText) {
-    return jsxRuntime.jsx(Box, { id: props.describingId, children: jsxRuntime.jsx(Text, { variant: "sm", color: "slate-500", children: props.helperText }) });
-  }
-  return jsxRuntime.jsx(Box, { id: props.describingId, children: props.errorText && jsxRuntime.jsx(Text, { variant: "sm", color: "red", children: props.errorText }) });
-};
-
 const StyledRadio = React__namespace.default.forwardRef((props, ref) => {
   const { className } = props, attributes = __rest(props, ["className"]);
   return jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx("input", Object.assign({ type: "radio" }, attributes, { className: classNames__default.default("ui:appearance-none ui:w-4 ui:h-4 ui:rounded-full ui:border ui:border-slate-300 ui:bg-white", "ui:checked:grid ui:checked:place-content-center ui:checked:before:scale-[1] ui:checked:bg-primary ui:checked:border-primary", "ui:transition-colors ui:duration-100 ui:ease-in-out", "ui:before:content-[' '] ui:before:w-1.5 ui:before:h-1.5 ui:before:bg-white ui:before:rounded ui:before:scale-[0]", "ui:before:transition-transform ui:before:duration-200 ui:before:ease-[cubic-bezier(.47,.34,.52,1.39)]", className), ref })) });
@@ -3098,10 +3153,6 @@ const FlyOutMenu = {
   ChildrenItem: FlyOutMenuChildrenItem
 };
 
-const LabelText = (props) => {
-  return jsxRuntime.jsx(Text, Object.assign({}, props));
-};
-
 const LabeledDatePicker = (_a) => {
   var { className: classNameFromProps, label, helperText, errorText } = _a, props = __rest(_a, ["className", "label", "helperText", "errorText"]);
   const helperErrorTextId = React__namespace.default.useId();
@@ -6526,6 +6577,8 @@ exports.InfoIcon = InfoIcon;
 exports.Input = Input;
 exports.InputSelect = InputSelectWithSubComponents;
 exports.LabelText = LabelText;
+exports.LabeledCheckbox = LabeledCheckbox;
+exports.LabeledCheckboxGroup = LabeledCheckboxGroup;
 exports.LabeledDatePicker = LabeledDatePicker;
 exports.LabeledInput = LabeledInput;
 exports.LabeledRadio = LabeledRadio;