@luscii-healthtech/web-ui 44.1.0 → 44.2.0

package/dist/index.development.js

@@ -2435,7 +2435,7 @@ 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(
-    "ui:appearance-none ui:w-6 ui:h-6 ui:rounded",
+    "ui:block 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",
@@ -2457,13 +2457,36 @@ const StyledCheckbox = React__namespace.default.forwardRef((props, ref) => {
   ) }));
 });
 
-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 LabeledCheckboxBase = React__namespace.default.forwardRef((props, ref) => {
+  const { variant = "regular", children, label, helperText, errorText, className, inputClassName, aside } = props, attributes = __rest(props, ["variant", "children", "label", "helperText", "errorText", "className", "inputClassName", "aside"]);
   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(
+  const isCard = variant === "card";
+  return jsxRuntime.jsxs(Stack, { as: "label", axis: "x", gap: "xs", htmlFor: id, className: classNames__default.default(
+    "ui:cursor-pointer",
+    {
+      "ui:cursor-not-allowed": disabled
+    },
+    /**
+     * Card styles
+     */
+    {
+      "ui:p-m ui:radius-xxs ui:transition-shadow": isCard,
+      // Default styles
+      "ui:ring ui:ring:1 ui:ring-border-neutral-primary-default ui:bg-white": isCard,
+      // Hovered styles
+      "ui:hover:ring-border-neutral-primary-hovered": isCard,
+      // Checked styles
+      "ui:has-checked:not-has-disabled:bg-background-neutral-secondary-hovered ui:has-checked:ring-border-brand-primary-default ui:has-checked:not-has-disabled:ring-2 ui:ring-border-brand-primary-default": isCard,
+      // Disabled styles
+      "ui:has-disabled:ring-border-neutral-primary-disabled": isCard,
+      // Disabled and checked styles
+      "ui:has-disabled:checked:bg-background-brand-primary-disabled": isCard,
+      // Checked and hovered styles
+      "ui:has-checked:not-has-disabled:bg-background-neutral-secondary-hovered ui:has-checked:not-has-disabled:ring-2 ui:hover:has-checked:not-has-disabled:ring-border-brand-primary-hovered": isCard
+    },
+    className
+  ), 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
@@ -2474,7 +2497,13 @@ const LabeledCheckbox = React__namespace.default.forwardRef((props, ref) => {
     {
       "ui:text-text-neutral-secondary-disabled": disabled
     }
-  ), children: children || label }), jsxRuntime.jsx(HelperAndErrorText, { helperText, errorText, describingId: semanticId })] })] });
+  ), children: children || label }), jsxRuntime.jsx(HelperAndErrorText, { helperText, errorText, describingId: semanticId })] }), aside && jsxRuntime.jsx("div", { className: "ui:ml-auto ui:flex-shrink-0", children: aside })] });
+});
+const LabeledCheckbox = React__namespace.default.forwardRef((props, ref) => {
+  return jsxRuntime.jsx(LabeledCheckboxBase, Object.assign({}, props, { ref, variant: "regular" }));
+});
+const LabeledCheckboxCard = React__namespace.default.forwardRef((props, ref) => {
+  return jsxRuntime.jsx(LabeledCheckboxBase, Object.assign({}, props, { ref, variant: "card" }));
 });
 
 const LabeledCheckboxGroup = (props) => {
@@ -2483,6 +2512,17 @@ const LabeledCheckboxGroup = (props) => {
   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 LabeledCheckboxCardGroup = (props) => {
+  const { children, title, className, columns = 2, helperText, errorText } = props, attributes = __rest(props, ["children", "title", "className", "columns", "helperText", "errorText"]);
+  const semanticId = React__namespace.default.useId();
+  return jsxRuntime.jsxs(Stack, Object.assign({ as: "fieldset", "aria-describedby": semanticId, className, gap: "xxs" }, attributes, { children: [title && jsxRuntime.jsx("legend", { className: "ui:contents", children: jsxRuntime.jsx(Text, { children: title }) }), jsxRuntime.jsx("div", { className: classNames__default.default("ui:grid ui:gap-x-m ui:gap-y-xs ui:items-start", {
+    "ui:grid-cols-1": columns === 1,
+    "ui:grid-cols-2": columns === 2,
+    "ui:grid-cols-3": columns === 3,
+    "ui:grid-cols-4": columns === 4
+  }), children }), jsxRuntime.jsx(HelperAndErrorText, { helperText, 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 });
 };
@@ -6578,6 +6618,8 @@ exports.Input = Input;
 exports.InputSelect = InputSelectWithSubComponents;
 exports.LabelText = LabelText;
 exports.LabeledCheckbox = LabeledCheckbox;
+exports.LabeledCheckboxCard = LabeledCheckboxCard;
+exports.LabeledCheckboxCardGroup = LabeledCheckboxCardGroup;
 exports.LabeledCheckboxGroup = LabeledCheckboxGroup;
 exports.LabeledDatePicker = LabeledDatePicker;
 exports.LabeledInput = LabeledInput;