@luscii-healthtech/web-ui 62.0.0 → 62.0.2

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/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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luscii-healthtech/web-ui",
-  "version": "62.0.0",
+  "version": "62.0.2",
   "license": "MIT",
   "author": {
     "name": "Joris Janssen"
@@ -146,7 +146,7 @@
     "rollup-plugin-visualizer": "^5.9.2",
     "sass": "^1.105.1",
     "sass-loader": "^17.0.1",
-    "storybook": "^10.6.2",
+    "storybook": "^10.6.5",
     "storybook-addon-tag-badges": "^3.1.0",
     "style-inject": "^0.3.0",
     "tailwindcss": "^4.3.3",