@luscii-healthtech/web-ui 44.1.0 → 44.2.0

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

@@ -1,5 +1,19 @@
 import React from "react";
-type Props = React.ComponentPropsWithRef<"input"> & {
+/**
+ * @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<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;
+} & {
     /**
      * The visual label next to the checkbox indicator.
      */
@@ -18,6 +32,7 @@ type Props = React.ComponentPropsWithRef<"input"> & {
      * a string as a prop. Will be rendered inside a `<Text>` component.
      */
     label?: React.ReactNode;
+} & {
     /**
      * Any additional information to show underneath the label.
      */
@@ -27,18 +42,34 @@ type Props = React.ComponentPropsWithRef<"input"> & {
      * 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 {};
+    aside?: never;
+}, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export declare const LabeledCheckboxCard: 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;
+} & {
+    /**
+     * 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;
+} & {
+    /**
+     * Slot rendered to the side of the label and helper text.
+     */
+    aside?: React.ReactNode;
+    helperText?: never;
+    errorText?: never;
+}, "ref"> & React.RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,26 @@
+import React from "react";
+type Props = React.ComponentPropsWithoutRef<"fieldset"> & {
+    children: React.ReactNode;
+    title?: string;
+    className?: string;
+    /**
+     * Over how many columns the checkbox cards should be distributed.
+     */
+    columns?: 1 | 2 | 3 | 4;
+    /**
+     * 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 `LabeledCheckboxCard` components.
+ */
+export declare const LabeledCheckboxCardGroup: React.FC<Props>;
+export {};

package/dist/src/index.d.ts

@@ -32,6 +32,8 @@ 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 { LabeledCheckboxCard } from "./components/Checkbox/LabeledCheckbox";
+export { LabeledCheckboxCardGroup } from "./components/Checkbox/LabeledCheckboxCardGroup";
 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

@@ -9,8 +9,10 @@ declare const meta: {
         inputClassName?: string;
         id: string;
         label?: React.ReactNode;
+    } & {
         helperText?: React.ReactNode;
         errorText?: React.ReactNode;
+        aside?: never;
     }, "ref"> & React.RefAttributes<HTMLInputElement>>;
     parameters: {
         backgrounds: {
@@ -27,6 +29,8 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Base: Story;
 export declare const Overview: Story;
+export declare const OverviewLabeledCheckboxCard: Story;
+export declare const LabeledCheckboxCardGroupLarge: Story;
 export declare const Disabled: Story;
 export declare const MultipleCheckboxes: Story;
 export declare const WithHelperAndErrorText: Story;

package/dist/web-ui-tailwind.css

@@ -115,6 +115,7 @@
   --ui-primitive-color-grey-700: #7387a4;
   --ui-primitive-color-grey-800: #3a4657;
   --ui-primitive-color-grey-900: #162130;
+  --ui-primitive-color-brand-100: #eff6ff;
   --ui-primitive-color-brand-500: #1d4ed8;
   --ui-primitive-color-brand-700: #1e40af;
   --ui-primitive-color-brand-900: #112d9c;
@@ -1004,6 +1005,9 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
 .ui\:h-\[20px\] {
   height: 20px;
 }
+.ui\:h-\[22px\] {
+  height: 22px;
+}
 .ui\:h-\[24px\] {
   height: 24px;
 }
@@ -1316,6 +1320,9 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
 .ui\:max-w-\[500px\] {
   max-width: 500px;
 }
+.ui\:max-w-\[900px\] {
+  max-width: 900px;
+}
 .ui\:max-w-\[calc\(100dvw-\(var\(--ui-spacing-xl\)\)\)\] {
   max-width: calc(100dvw - (var(--ui-spacing-xl)));
 }
@@ -1349,6 +1356,9 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
 .ui\:flex-initial {
   flex: 0 auto;
 }
+.ui\:flex-shrink-0 {
+  flex-shrink: 0;
+}
 .ui\:shrink-0 {
   flex-shrink: 0;
 }
@@ -1531,6 +1541,18 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
 .ui\:appearance-none {
   appearance: none;
 }
+.ui\:grid-cols-1 {
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+.ui\:grid-cols-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+.ui\:grid-cols-3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+.ui\:grid-cols-4 {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
 .ui\:grid-cols-\[100px_auto\] {
   grid-template-columns: 100px auto;
 }
@@ -1677,6 +1699,9 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
 .ui\:gap-x-2 {
   column-gap: calc(var(--ui-spacing) * 2);
 }
+.ui\:gap-x-m {
+  column-gap: var(--ui-spacing-m);
+}
 .ui\:gap-x-s {
   column-gap: var(--ui-spacing-s);
 }
@@ -1718,6 +1743,9 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
     margin-inline-end: calc(calc(var(--ui-spacing) * 8) * calc(1 - var(--tw-space-x-reverse)));
   }
 }
+.ui\:gap-y-xs {
+  row-gap: var(--ui-spacing-xs);
+}
 .ui\:divide-x {
   :where(& > :not(:last-child)) {
     --tw-divide-x-reverse: 0;
@@ -3026,6 +3054,10 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
   --tw-shadow: none;
   box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
 }
+.ui\:ring {
+  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
 .ui\:ring-1 {
   --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
   box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -3033,6 +3065,12 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
 .ui\:ring-black {
   --tw-ring-color: var(--ui-color-black);
 }
+.ui\:ring-border-brand-primary-default {
+  --tw-ring-color: var(--ui-primitive-color-brand-700);
+}
+.ui\:ring-border-neutral-primary-default {
+  --tw-ring-color: var(--ui-primitive-color-grey-700);
+}
 .ui\:outline {
   outline-style: var(--tw-outline-style);
   outline-width: 1px;
@@ -4199,6 +4237,13 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
     }
   }
 }
+.ui\:hover\:ring-border-neutral-primary-hovered {
+  &:hover {
+    @media (hover: hover) {
+      --tw-ring-color: var(--ui-primitive-color-brand-500);
+    }
+  }
+}
 .ui\:hover\:transition-shadow {
   &:hover {
     @media (hover: hover) {
@@ -4417,6 +4462,51 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
     }
   }
 }
+.ui\:has-checked\:ring-border-brand-primary-default {
+  &:has(*:checked) {
+    --tw-ring-color: var(--ui-primitive-color-brand-700);
+  }
+}
+.ui\:has-checked\:not-has-disabled\:bg-background-neutral-secondary-hovered {
+  &:has(*:checked) {
+    &:not(*:has(*:disabled)) {
+      background-color: var(
+    --ui-primitive-color-brand-100
+  );
+    }
+  }
+}
+.ui\:has-checked\:not-has-disabled\:ring-2 {
+  &:has(*:checked) {
+    &:not(*:has(*:disabled)) {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
+}
+.ui\:hover\:has-checked\:not-has-disabled\:ring-border-brand-primary-hovered {
+  &:hover {
+    @media (hover: hover) {
+      &:has(*:checked) {
+        &:not(*:has(*:disabled)) {
+          --tw-ring-color: var(--ui-primitive-color-brand-500);
+        }
+      }
+    }
+  }
+}
+.ui\:has-disabled\:ring-border-neutral-primary-disabled {
+  &:has(*:disabled) {
+    --tw-ring-color: var(--ui-primitive-color-grey-500);
+  }
+}
+.ui\:has-disabled\:checked\:bg-background-brand-primary-disabled {
+  &:has(*: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;