@luscii-healthtech/web-ui 61.0.2 → 62.0.1

package/dist/src/components/Radio/LabeledRadioCard.d.ts

@@ -41,11 +41,11 @@ type SharedProps = {
  * </LabeledRadioCardGroup>
  * ```
  *
- * Using `children` prop for custom content:
+ * Using `children` prop for custom content, rendered as-is:
  * ```tsx
  * <LabeledRadioCardGroup>
  *   <LabeledRadioCard name="payment" id="credit" value="credit">
- *     <Stack axis="y" _gap="base">
+ *     <Stack as="span" axis="y" _gap="base">
  *       <Text variant="body-base-regular">Credit Card</Text>
  *       <Text variant="body-small-light" color="neutral-secondary">
  *         Pay securely with your card
@@ -60,6 +60,11 @@ export declare const LabeledRadioCard: React.ForwardRefExoticComponent<(Omit<Omi
     subtitle?: React.ReactNode;
     leadingIcon?: React.ReactNode;
 }, "ref"> | Omit<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "children"> & SharedProps & {
+    /**
+     * Custom content, rendered as-is: lay it out and style it yourself. It's
+     * rendered inside a `<label>`, so use phrasing elements (e.g.
+     * `<Stack as="span">`).
+     */
     children: React.ReactNode;
 }, "ref">) & React.RefAttributes<HTMLInputElement>>;
 export {};

package/dist/src/components/Textarea/LabeledTextarea.d.ts

@@ -1,7 +1,34 @@
 import React from "react";
 import { type FormFieldSize } from "../../types/general.types.js";
 import { type TextareaProps } from "./Textarea";
-export declare const LabeledTextarea: React.ForwardRefExoticComponent<Omit<TextareaProps, "isDisabled" | "isError"> & {
+/**
+ * Form-ready textarea component that wraps {@link Textarea} with a label, helper text,
+ * and error text. This is the **recommended component for multi-line text in forms**.
+ *
+ * Features:
+ * - Renders a native `<textarea>` — compatible with `react-hook-form` `register()` directly.
+ * - Displays a label above the textarea when provided, linked to the textarea with `htmlFor`.
+ * - Shows helper text or error text below the textarea with proper `aria-describedby` wiring.
+ * - Automatically toggles error styling and `aria-invalid` when `errorText` is provided.
+ *   A consumer-supplied `aria-invalid` is kept when there's no `errorText`.
+ *
+ * When to use:
+ * - Use `LabeledTextarea` for notes, messages, descriptions and other free text that can
+ *   span multiple lines.
+ * - For single-line text, use {@link LabeledInput} instead.
+ * - If you need a bare textarea without label/helper/error, use {@link Textarea} directly.
+ *
+ * @example
+ * // With react-hook-form
+ * <LabeledTextarea
+ *   label="Message"
+ *   helperText="The patient will see this message in the app"
+ *   {...register("message")}
+ * />
+ *
+ * @see {@link Textarea} for the low-level building block without form wiring.
+ */
+type Props = Omit<TextareaProps, "isError" | "isDisabled"> & {
     /**
      * The visible label, linked to the textarea with `htmlFor`. When omitted, give
      * the textarea an accessible name with `aria-label` or `aria-labelledby`.
@@ -31,7 +58,13 @@ export declare const LabeledTextarea: React.ForwardRefExoticComponent<Omit<Texta
      *
      * By default the field only takes its intrinsic width.
      */
-    width?: FormFieldSize | [FormFieldSize, FormFieldSize?, FormFieldSize?, FormFieldSize?, FormFieldSize?];
+    width?: FormFieldSize | [
+        FormFieldSize,
+        FormFieldSize?,
+        FormFieldSize?,
+        FormFieldSize?,
+        FormFieldSize?
+    ];
     /**
      * When true, the field stretches to fill the full width of its container,
      * also when the container aligns its children to the start.
@@ -39,4 +72,8 @@ export declare const LabeledTextarea: React.ForwardRefExoticComponent<Omit<Texta
      * Shorthand for `width="full"`. When both are given, `width` wins.
      */
     fullWidth?: boolean;
-} & React.RefAttributes<HTMLTextAreaElement>>;
+};
+export declare const LabeledTextarea: (props: Props & {
+    ref?: React.Ref<HTMLTextAreaElement>;
+}) => React.JSX.Element;
+export {};

package/dist/src/generated/components/Radio/LabeledRadioCard.d.ts

@@ -41,11 +41,11 @@ type SharedProps = {
  * </LabeledRadioCardGroup>
  * ```
  *
- * Using `children` prop for custom content:
+ * Using `children` prop for custom content, rendered as-is:
  * ```tsx
  * <LabeledRadioCardGroup>
  *   <LabeledRadioCard name="payment" id="credit" value="credit">
- *     <Stack axis="y" _gap="base">
+ *     <Stack as="span" axis="y" _gap="base">
  *       <Text variant="body-base-regular">Credit Card</Text>
  *       <Text variant="body-small-light" color="neutral-secondary">
  *         Pay securely with your card
@@ -60,6 +60,11 @@ export declare const LabeledRadioCard: React.ForwardRefExoticComponent<(Omit<Omi
     subtitle?: React.ReactNode;
     leadingIcon?: React.ReactNode;
 }, "ref"> | Omit<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "children"> & SharedProps & {
+    /**
+     * Custom content, rendered as-is: lay it out and style it yourself. It's
+     * rendered inside a `<label>`, so use phrasing elements (e.g.
+     * `<Stack as="span">`).
+     */
     children: React.ReactNode;
 }, "ref">) & React.RefAttributes<HTMLInputElement>>;
 export {};

package/dist/src/generated/components/Textarea/LabeledTextarea.d.ts

@@ -1,7 +1,34 @@
 import React from "react";
 import { type FormFieldSize } from "../../../types/general.types.js";
 import { type TextareaProps } from "./Textarea";
-export declare const LabeledTextarea: React.ForwardRefExoticComponent<Omit<TextareaProps, "isDisabled" | "isError"> & {
+/**
+ * Form-ready textarea component that wraps {@link Textarea} with a label, helper text,
+ * and error text. This is the **recommended component for multi-line text in forms**.
+ *
+ * Features:
+ * - Renders a native `<textarea>` — compatible with `react-hook-form` `register()` directly.
+ * - Displays a label above the textarea when provided, linked to the textarea with `htmlFor`.
+ * - Shows helper text or error text below the textarea with proper `aria-describedby` wiring.
+ * - Automatically toggles error styling and `aria-invalid` when `errorText` is provided.
+ *   A consumer-supplied `aria-invalid` is kept when there's no `errorText`.
+ *
+ * When to use:
+ * - Use `LabeledTextarea` for notes, messages, descriptions and other free text that can
+ *   span multiple lines.
+ * - For single-line text, use {@link LabeledInput} instead.
+ * - If you need a bare textarea without label/helper/error, use {@link Textarea} directly.
+ *
+ * @example
+ * // With react-hook-form
+ * <LabeledTextarea
+ *   label="Message"
+ *   helperText="The patient will see this message in the app"
+ *   {...register("message")}
+ * />
+ *
+ * @see {@link Textarea} for the low-level building block without form wiring.
+ */
+type Props = Omit<TextareaProps, "isError" | "isDisabled"> & {
     /**
      * The visible label, linked to the textarea with `htmlFor`. When omitted, give
      * the textarea an accessible name with `aria-label` or `aria-labelledby`.
@@ -31,7 +58,13 @@ export declare const LabeledTextarea: React.ForwardRefExoticComponent<Omit<Texta
      *
      * By default the field only takes its intrinsic width.
      */
-    width?: FormFieldSize | [FormFieldSize, FormFieldSize?, FormFieldSize?, FormFieldSize?, FormFieldSize?];
+    width?: FormFieldSize | [
+        FormFieldSize,
+        FormFieldSize?,
+        FormFieldSize?,
+        FormFieldSize?,
+        FormFieldSize?
+    ];
     /**
      * When true, the field stretches to fill the full width of its container,
      * also when the container aligns its children to the start.
@@ -39,4 +72,8 @@ export declare const LabeledTextarea: React.ForwardRefExoticComponent<Omit<Texta
      * Shorthand for `width="full"`. When both are given, `width` wins.
      */
     fullWidth?: boolean;
-} & React.RefAttributes<HTMLTextAreaElement>>;
+};
+export declare const LabeledTextarea: (props: Props & {
+    ref?: React.Ref<HTMLTextAreaElement>;
+}) => React.JSX.Element;
+export {};

package/dist/stories/LabeledRadio.stories.d.ts

@@ -37,6 +37,13 @@ export declare const OverviewLabeledRadioCard: Story;
 export declare const UsingLabelAndSubtitleProps: Story;
 export declare const UsingChildrenPropForCustomContent: Story;
 export declare const SingleColumnWithIcons: Story;
+/**
+ * A `ReactNode` passed as `label` or `children` is rendered as-is and fills
+ * the card, so you decide its layout: e.g. center the content, or put an icon
+ * above the label. Use phrasing elements (e.g. `Stack as="span"`), as the
+ * content is rendered inside a `<label>`.
+ */
+export declare const CustomContentLayout: Story;
 /**
  * Besides a string, `title` takes a node, such as a `Heading` with an info
  * icon. It's still rendered as the fieldset's `<legend>`, so it names the

package/dist/stories/LabeledTextarea.stories.d.ts

@@ -1,13 +1,15 @@
 import type { StoryObj } from "@storybook/react-vite";
 declare const meta: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Omit<import("../src").TextareaProps, "isDisabled" | "isError"> & {
+    component: (props: (Omit<import("../src").TextareaProps, "isDisabled" | "isError"> & {
         label?: React.ReactNode;
         helperText?: React.ReactNode;
         errorText?: React.ReactNode;
         width?: import("../src/types/general.types").FormFieldSize | [import("../src/types/general.types").FormFieldSize, import("../src/types/general.types").FormFieldSize?, import("../src/types/general.types").FormFieldSize?, import("../src/types/general.types").FormFieldSize?, import("../src/types/general.types").FormFieldSize?];
         fullWidth?: boolean;
-    } & import("react").RefAttributes<HTMLTextAreaElement>>;
+    }) & {
+        ref?: React.Ref<HTMLTextAreaElement>;
+    }) => import("react").JSX.Element;
     args: {
         onChange: import("@vitest/spy").Mock<(...args: any[]) => any>;
         onBlur: import("@vitest/spy").Mock<(...args: any[]) => any>;
@@ -87,3 +89,8 @@ export declare const Widths: Story;
  * `width` also accepts a tuple of sizes per breakpoint.
  */
 export declare const ResponsiveWidth: Story;
+/**
+ * `LabeledTextarea` accepts a `ref`, which points to its native `<textarea>`.
+ * Form libraries such as react-hook-form's `register()` rely on this.
+ */
+export declare const WithRef: Story;

package/dist/stories/PopoverRadioCardRecipe.stories.d.ts

@@ -6,9 +6,6 @@ import { type StoryObj } from "@storybook/react-vite";
  *
  * The selection is only applied when the user confirms it with the "Set"
  * button, so the field value doesn't change while the user is still choosing.
- *
- * See `POPOVER_RADIOCARD_RECIPE_SHORTCOMINGS.md` in the root of this
- * repository for the workarounds this recipe needs.
  */
 declare const meta: {
     title: string;

package/dist/web-ui-tailwind.css

@@ -1970,16 +1970,9 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
 .ui\:max-w-\[calc\(100dvw-\(var\(--ui-spacing-xl\)\)\)\] {
   max-width: calc(100dvw - (var(--ui-spacing-xl)));
 }
-.ui\:max-w-\[none\] {
-  max-width: none;
-}
 .ui\:max-w-full {
   max-width: 100%;
 }
-.ui\:max-w-none {
-  max-width: none;
-  max-width: var(--ui-spacing-none);
-}
 .ui\:max-w-screen {
   max-width: 100vw;
 }
@@ -3804,9 +3797,6 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
 .ui\:text-\(--ui-primitive-color-red-700\) {
   color: var(--ui-primitive-color-red-700);
 }
-.ui\:text-\(--ui-primitive-color-…\) {
-  color: var(--ui-primitive-color-…);
-}
 .ui\:text-amber-700 {
   color: var(--ui-color-amber-700);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luscii-healthtech/web-ui",
-  "version": "61.0.2",
+  "version": "62.0.1",
   "license": "MIT",
   "author": {
     "name": "Joris Janssen"