@luscii-healthtech/web-ui 44.0.0 → 44.1.0

package/dist/src/components/Checkbox/Checkbox.d.ts

@@ -65,4 +65,17 @@ export interface CheckboxProps {
      */
     renderLabel?: (props: CheckboxProps) => JSX.Element | null;
 }
+/**
+ * @deprecated - use `LabeledCheckbox` components in a `LabeledCheckboxGroup` instead.
+ *
+ * E.g. with React Hook Form:
+ *
+ * @example
+ * ```tsx
+ * <LabeledCheckboxGroup>
+ *   <LabeledCheckbox {...register("orderedMeals")} label="Anchovies pasta" value="anchovies-pasta" />
+ *   <LabeledCheckbox {...register("orderedMeals")} label="Banana dessert" value="banana-dessert" />
+ * </LabeledCheckboxGroup>
+ * ```
+ */
 export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;

package/dist/src/components/Checkbox/LabeledCheckbox.d.ts

@@ -0,0 +1,44 @@
+import React from "react";
+type Props = React.ComponentPropsWithRef<"input"> & {
+    /**
+     * The visual label next to the checkbox indicator.
+     */
+    children?: React.ReactNode;
+    /**
+     * Additional classes to apply to the checkbox input HTML element.
+     */
+    inputClassName?: string;
+    /**
+     * Making `id` required, since it's important for accessibility.
+     */
+    id: string;
+    /**
+     * The visual label next to the checkbox indicator.
+     * Alternative to `children` for when it's easier to just pass
+     * a string as a prop. Will be rendered inside a `<Text>` component.
+     */
+    label?: React.ReactNode;
+    /**
+     * Any additional information to show underneath the label.
+     */
+    helperText?: React.ReactNode;
+    /**
+     * An error message that should be shown when there's something wrong
+     * with the user's input.
+     */
+    errorText?: React.ReactNode;
+};
+/**
+ * @example
+ * ```tsx
+ * <LabeledCheckbox
+ *   name="newsletter"
+ *   id="newsletter"
+ *   value="yes"
+ *   label="Subscribe to newsletter"
+ *   helperText="We will send you updates about new features."
+ * />
+ * ```
+ */
+export declare const LabeledCheckbox: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export {};

package/dist/src/components/Checkbox/LabeledCheckboxGroup.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+type Props = {
+    children: React.ReactNode;
+    title?: string;
+    className?: string;
+    /**
+     * Any additional information to show underneath the radio group.
+     */
+    helperText?: React.ReactNode;
+    /**
+     * An error message that should be shown when there's something wrong
+     * with the user's input.
+     */
+    errorText?: React.ReactNode;
+};
+/**
+ * This component is used to group radio buttons together with a title, and provide
+ * a semantic helper and error text to the group. It requires children to function,
+ * in practice these are always `LabeledCheckbox` components (as opposed to `LabeledCheckbox`
+ * and `LabeledInput`, which provide the HTML `input` element themselves).
+ */
+export declare const LabeledCheckboxGroup: React.FC<Props>;
+export {};

package/dist/src/components/Checkbox/StyledCheckbox.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+export declare const StyledCheckbox: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
+    ref?: ((instance: HTMLInputElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLInputElement> | null | undefined;
+}, "ref"> & React.RefAttributes<HTMLInputElement>>;

package/dist/src/index.d.ts

@@ -30,6 +30,8 @@ export { TertiaryIconButton } from "./components/ButtonV2/TertiaryIconButton";
 export { default as Carousel } from "./components/Carousel/Carousel";
 export { default as CenteredHero } from "./components/CenteredHero/CenteredHero";
 export { Checkbox } from "./components/Checkbox/Checkbox";
+export { LabeledCheckbox } from "./components/Checkbox/LabeledCheckbox";
+export { LabeledCheckboxGroup } from "./components/Checkbox/LabeledCheckboxGroup";
 export { Chip } from "./components/Chip/Chip";
 export { ConfirmationDialog } from "./components/ConfirmationDialog/ConfirmationDialog";
 export type { ConfirmationDialogChoice, ConfirmationDialogProps, ConfirmationDialogTitleProps, } from "./components/ConfirmationDialog/types/ConfirmationDialog.types";

package/dist/stories/LabeledCheckbox.stories.d.ts

@@ -0,0 +1,32 @@
+import React from "react";
+import { type StoryObj } from "@storybook/react-vite";
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
+        ref?: ((instance: HTMLInputElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLInputElement> | null | undefined;
+    } & {
+        children?: React.ReactNode;
+        inputClassName?: string;
+        id: string;
+        label?: React.ReactNode;
+        helperText?: React.ReactNode;
+        errorText?: React.ReactNode;
+    }, "ref"> & React.RefAttributes<HTMLInputElement>>;
+    parameters: {
+        backgrounds: {
+            default: string;
+        };
+        docs: {
+            helperText: {
+                component: string;
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Base: Story;
+export declare const Overview: Story;
+export declare const Disabled: Story;
+export declare const MultipleCheckboxes: Story;
+export declare const WithHelperAndErrorText: Story;

package/dist/web-ui-tailwind.css

@@ -2024,6 +2024,9 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
 .ui\:border-black {
   border-color: var(--ui-color-black);
 }
+.ui\:border-border-neutral-primary-default {
+  border-color: var(--ui-primitive-color-grey-700);
+}
 .ui\:border-border-success-primary-default {
   border-color: var(--ui-primitive-color-green-700);
 }
@@ -2907,6 +2910,9 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
 .ui\:text-text-error-primary-default {
   color: var(--ui-primitive-color-red-900);
 }
+.ui\:text-text-neutral-secondary-disabled {
+  color: var(--ui-primitive-color-grey-500);
+}
 .ui\:text-transparent {
   color: transparent;
 }
@@ -3413,18 +3419,36 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
     left: 0px;
   }
 }
+.ui\:before\:block {
+  &::before {
+    content: var(--tw-content);
+    display: block;
+  }
+}
 .ui\:before\:h-1\.5 {
   &::before {
     content: var(--tw-content);
     height: 0.375rem;
   }
 }
+.ui\:before\:h-full {
+  &::before {
+    content: var(--tw-content);
+    height: 100%;
+  }
+}
 .ui\:before\:w-1\.5 {
   &::before {
     content: var(--tw-content);
     width: 0.375rem;
   }
 }
+.ui\:before\:w-full {
+  &::before {
+    content: var(--tw-content);
+    width: 100%;
+  }
+}
 .ui\:before\:w-m {
   &::before {
     content: var(--tw-content);
@@ -3505,6 +3529,24 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
     background-color: var(--ui-color-white);
   }
 }
+.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\'\)\] {
+  &::before {
+    content: var(--tw-content);
+    background-image: 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 {
+  &::before {
+    content: var(--tw-content);
+    background-position: center;
+  }
+}
+.ui\:before\:bg-no-repeat {
+  &::before {
+    content: var(--tw-content);
+    background-repeat: no-repeat;
+  }
+}
 .ui\:before\:opacity-0 {
   &::before {
     content: var(--tw-content);
@@ -3517,6 +3559,14 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
     opacity: 100%;
   }
 }
+.ui\:before\:transition-\[scale\] {
+  &::before {
+    content: var(--tw-content);
+    transition-property: scale;
+    transition-timing-function: var(--tw-ease, var(--ui-default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--ui-default-transition-duration));
+  }
+}
 .ui\:before\:transition-transform {
   &::before {
     content: var(--tw-content);
@@ -3545,6 +3595,13 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
     transition-duration: 200ms;
   }
 }
+.ui\:before\:ease-\[cubic-bezier\(\.17\,\.67\,\.16\,1\.5\)\] {
+  &::before {
+    content: var(--tw-content);
+    --tw-ease: cubic-bezier(.17,.67,.16,1.5);
+    transition-timing-function: cubic-bezier(.17,.67,.16,1.5);
+  }
+}
 .ui\:before\:ease-\[cubic-bezier\(\.47\,\.34\,\.52\,1\.39\)\] {
   &::before {
     content: var(--tw-content);
@@ -3603,6 +3660,12 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
     animation-duration: 200ms;
   }
 }
+.ui\:before\:ease-\[cubic-bezier\(\.17\,\.67\,\.16\,1\.5\)\] {
+  &::before {
+    content: var(--tw-content);
+    animation-timing-function: cubic-bezier(.17,.67,.16,1.5);
+  }
+}
 .ui\:before\:ease-\[cubic-bezier\(\.47\,\.34\,\.52\,1\.39\)\] {
   &::before {
     content: var(--tw-content);
@@ -3856,11 +3919,21 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
     place-content: center;
   }
 }
+.ui\:checked\:border-border-brand-primary-default {
+  &:checked {
+    border-color: var(--ui-primitive-color-brand-700);
+  }
+}
 .ui\:checked\:border-primary {
   &:checked {
     border-color: var(--ui-color-blue-800);
   }
 }
+.ui\:checked\:bg-icon-brand-primary-default {
+  &:checked {
+    background-color: var(--ui-primitive-color-brand-700);
+  }
+}
 .ui\:checked\:bg-primary {
   &:checked {
     background-color: var(--ui-color-blue-800);
@@ -3881,6 +3954,13 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
     }
   }
 }
+.ui\:hover\:border-border-neutral-primary-hovered {
+  &:hover {
+    @media (hover: hover) {
+      border-color: var(--ui-primitive-color-brand-500);
+    }
+  }
+}
 .ui\:hover\:border-input-border-dark {
   &:hover {
     @media (hover: hover) {
@@ -4135,6 +4215,15 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
     }
   }
 }
+.ui\:checked\:hover\:bg-icon-brand-primary-hover {
+  &:checked {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--ui-primitive-color-brand-500);
+      }
+    }
+  }
+}
 .ui\:focus\:z-\[4\] {
   &:focus {
     z-index: 4;
@@ -4311,6 +4400,23 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
     transition-duration: var(--tw-duration, var(--ui-default-transition-duration));
   }
 }
+.ui\:disabled\:cursor-not-allowed {
+  &:disabled {
+    cursor: not-allowed;
+  }
+}
+.ui\:disabled\:border-border-neutral-primary-disabled {
+  &:disabled {
+    border-color: var(--ui-primitive-color-grey-500);
+  }
+}
+.ui\:disabled\:checked\:bg-background-brand-primary-disabled {
+  &:disabled {
+    &:checked {
+      background-color: var(--ui-primitive-color-grey-500);
+    }
+  }
+}
 .ui\:data-\[side\=bottom\]\:slide-in-from-top-2 {
   &[data-side="bottom"] {
     --tw-enter-translate-y: -0.5rem;
@@ -4494,6 +4600,11 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
     margin-top: calc(var(--ui-spacing) * 0);
   }
 }
+.ui\:sm\:mt-\[2px\] {
+  @media (width >= 40rem) {
+    margin-top: 2px;
+  }
+}
 .ui\:sm\:ml-4 {
   @media (width >= 40rem) {
     margin-left: calc(var(--ui-spacing) * 4);