@luscii-healthtech/web-ui 35.5.0 → 35.6.0

package/dist/_internal/HelperAndErrorText.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+type Props = {
+    errorText?: React.ReactNode;
+    errorTextId?: string;
+    helperText?: React.ReactNode;
+    helperTextId?: string;
+};
+export declare const HelperAndErrorText: (props: Props) => React.JSX.Element;
+export {};

package/dist/_internal/LabelText.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import { Text } from "../components/Text/Text";
+type Props = React.ComponentProps<typeof Text>;
+export declare const LabelText: (props: Props) => React.JSX.Element;
+export {};

package/dist/components/Radio/LabeledRadio.d.ts

@@ -0,0 +1,67 @@
+import React from "react";
+type Props = React.ComponentPropsWithRef<"input"> & {
+    /**
+     * The visual label next to the radio indicator.
+     */
+    children?: React.ReactNode;
+    /**
+     * Additional classes to apply to the radio input HTML element.
+     */
+    inputClassName?: string;
+    /**
+     * Making `name` required, since it's essential to make the radios
+     * work together in a group. Normally you would put the value of
+     * the selection here.
+     *
+     * @example "notification-method"
+     *
+     * ```tsx
+     * <StyledRadioGroup>
+     *   <StyledRadio name="notification-method" id="email" value="email" />
+     *   <StyledRadio name="notification-method" id="sms" value="sms" />
+     * </StyledRadioGroup>
+     * ```
+     */
+    name: string;
+    /**
+     * Making `id` required, since it's important for accessibility.
+     */
+    id: string;
+    /**
+     * The visual label next to the radio 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
+ * <StyledRadioGroup>
+ *   <StyledRadio
+ *     name="login-method"
+ *     id="email"
+ *     value="email"
+ *     label="Email"
+ *   />
+ *   <StyledRadio
+ *     name="login-method"
+ *     id="sms"
+ *     value="sms"
+ *     label="SMS"
+ *     helperText="We will use your phone number only for login purposes."
+ *   />
+ * </StyledRadioGroup>
+ * ```
+ */
+export declare const LabeledRadio: React.FC<Props>;
+export {};

package/dist/components/Radio/LabeledRadioGroup.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { HelperAndErrorText } from "../../_internal/HelperAndErrorText";
+type Props = React.ComponentProps<typeof HelperAndErrorText> & {
+    children?: React.ReactNode;
+    title?: string;
+    className?: string;
+};
+export declare const LabeledRadioGroup: React.FC<Props>;
+export {};

package/dist/components/Radio/RadioV2.d.ts

@@ -1,5 +1,4 @@
 import React from "react";
-import "./RadioV2.css";
 export interface RadioProps extends React.InputHTMLAttributes<HTMLInputElement> {
     name: string;
     value: string | number;

package/dist/components/Radio/StyledRadio.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import "./RadioV2.css";
+type Props = React.ComponentPropsWithRef<"input">;
+export declare const StyledRadio: React.FC<Props>;
+export {};

package/dist/components/Text/Text.d.ts

@@ -10,7 +10,7 @@ import "./Text.css";
 export declare const allowedTextStyles: {
     readonly sm: `${string} ui-font-medium`;
     readonly "sm-strong": `${string} ui-font-semibold ui-antialiased`;
-    readonly base: string;
+    readonly base: `${string} ui-font-normal`;
     readonly medium: `${string} ui-font-medium ui-antialiased`;
     readonly strong: `${string} ui-font-semibold ui-antialiased`;
     readonly lg: "";

package/dist/index.d.ts

@@ -36,6 +36,9 @@ export { InfoField } from "./components/InfoField/InfoField";
 export { default as Input } from "./components/Input/Input";
 export { FlyOutMenu } from "./components/FlyOutMenu/FlyOutMenu";
 export { StyledInput } from "./components/Input/StyledInput";
+export { StyledRadio } from "./components/Radio/StyledRadio";
+export { LabeledRadio } from "./components/Radio/LabeledRadio";
+export { LabeledRadioGroup } from "./components/Radio/LabeledRadioGroup";
 export { default as Line } from "./components/Line/Line";
 export { Table, type TableProps } from "./components/Table/Table";
 export { prepareClientSidePagination } from "./components/Table/Table.utils";

package/dist/index.development.js

@@ -984,7 +984,7 @@ const responsiveTextSizeVariants = {
 const allowedTextStyles = {
   sm: `${responsiveTextSizeVariants.sm} ui-font-medium`,
   "sm-strong": `${responsiveTextSizeVariants.sm} ui-font-semibold ui-antialiased`,
-  base: responsiveTextSizeVariants.base,
+  base: `${responsiveTextSizeVariants.base} ui-font-normal`,
   medium: `${responsiveTextSizeVariants.base} ui-font-medium ui-antialiased`,
   strong: `${responsiveTextSizeVariants.base} ui-font-semibold ui-antialiased`,
   lg: "",
@@ -2773,44 +2773,46 @@ NotificationBanner.defaultProps = {
   onButtonClick: void 0
 };
 
-var css_248z$a = ".ui-radio-form-field-label input[type=\"radio\"]:checked + .ui-radio-circle {\n\n    --tw-bg-opacity: 1;\n\n    background-color: rgb(30 64 175 / var(--tw-bg-opacity))\n}\n\n.ui-radio-form-field-label[data-has-error=\"true\"] .ui-radio-circle {\n\n    --tw-border-opacity: 1;\n\n    border-color: rgb(197 48 48 / var(--tw-border-opacity));\n\n    outline-color: #FFF1F1\n}\n\n.ui-radio-form-field-label\n  input[type=\"radio\"]:checked\n  + .ui-radio-circle\n  .ui-radio-inner-circle {\n\n    --tw-bg-opacity: 1;\n\n    background-color: rgb(255 255 255 / var(--tw-bg-opacity))\n}\n";
+const HelperAndErrorText = (props) => {
+  const showHelperText = Boolean(props.helperText) && !props.errorText;
+  return React__namespace.default.createElement(
+    Box,
+    null,
+    props.errorText && React__namespace.default.createElement(Text, { variant: "sm", color: "red", id: props.errorTextId }, props.errorText),
+    showHelperText && React__namespace.default.createElement(Text, { variant: "sm", color: "slate-500", id: props.helperTextId }, props.helperText)
+  );
+};
+
+var css_248z$a = ".ui-radio-form-field-label input[type=\"radio\"]:checked + .ui-radio-circle {\n  --tw-bg-opacity: 1;\n  background-color: rgb(30 64 175 / var(--tw-bg-opacity));\n  --tw-border-opacity: 1;\n  border-color: rgb(30 64 175 / var(--tw-border-opacity));\n}\n.ui-radio-form-field-label input[type=\"radio\"]:disabled + .ui-radio-circle {\n  opacity: 0.5;\n}\n\n.ui-radio-form-field-label[data-has-error=\"true\"] .ui-radio-circle {\n  --tw-border-opacity: 1;\n  border-color: rgb(197 48 48 / var(--tw-border-opacity));\n  outline-color: #FFF1F1;\n}\n\n.ui-radio-form-field-label\n  input[type=\"radio\"]:checked\n  + .ui-radio-circle\n  .ui-radio-inner-circle {\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n}\n";
 styleInject(css_248z$a);
 
+const StyledRadio = React__namespace.default.forwardRef((props, ref) => {
+  const { className } = props, attributes = __rest(props, ["className"]);
+  return React__namespace.default.createElement(
+    React__namespace.default.Fragment,
+    null,
+    React__namespace.default.createElement("input", Object.assign({ type: "radio" }, attributes, { className: classNames__default.default("ui-hidden", className), ref })),
+    React__namespace.default.createElement(
+      "span",
+      { "aria-hidden": true, className: classNames__default.default("ui-radio-circle ui-flex ui-h-4 ui-w-4 ui-flex-col ui-items-center ui-justify-center ui-rounded-xl ui-border ui-border-slate-300", "ui-transition-colors ui-duration-300 ui-ease-in-out") },
+      React__namespace.default.createElement("span", { className: "ui-radio-inner-circle ui-block ui-h-1.5 ui-w-1.5 ui-rounded-xl ui-transition-colors ui-duration-300 ui-ease-in-out" })
+    )
+  );
+});
+
 function RadioInner(_a) {
   var { text, info, isError, innerRef, className, name } = _a, otherProps = __rest(_a, ["text", "info", "isError", "innerRef", "className", "name"]);
   const { value, disabled } = otherProps;
   const nameHtmlFor = `${name}-field-${value}`;
   return React__namespace.default.createElement(
-    "label",
-    { className: "ui-radio-form-field-label ui-flex ui-flex-row ui-leading-tight", htmlFor: nameHtmlFor, "data-has-error": isError, "data-test-id": nameHtmlFor },
-    React__namespace.default.createElement(
-      "div",
-      { className: "ui-flex ui-flex-row ui-items-center ui-self-start" },
-      React__namespace.default.createElement("input", Object.assign({}, otherProps, {
-        name,
-        // To consider: the tailwind forms plugin adds specific styles for form inputs,
-        // including radio buttons. Is it worth changing to that?
-        className: classNames__default.default("ui-hidden", className),
-        ref: innerRef,
-        type: "radio",
-        id: nameHtmlFor,
-        disabled
-      })),
-      React__namespace.default.createElement(
-        "span",
-        { className: classNames__default.default("ui-radio-circle ui-flex ui-h-4 ui-w-4 ui-flex-col ui-items-center ui-justify-center ui-rounded-xl ui-border ui-border-slate-300 ui-transition-colors ui-duration-300 ui-ease-in-out") },
-        React__namespace.default.createElement("span", { className: "ui-radio-inner-circle ui-block ui-h-1.5 ui-w-1.5 ui-rounded-xl ui-transition-colors ui-duration-300 ui-ease-in-out" })
-      )
-    ),
+    Stack,
+    { as: "label", axis: "x", gap: "xs", className: "ui-radio-form-field-label ui-flex ui-flex-row ui-leading-none", htmlFor: nameHtmlFor, "data-has-error": isError, "data-test-id": nameHtmlFor },
+    React__namespace.default.createElement(StyledRadio, Object.assign({}, otherProps, { name, id: nameHtmlFor, ref: innerRef })),
     React__namespace.default.createElement(
       "div",
       null,
-      text && React__namespace.default.createElement(
-        "div",
-        { className: "ui-ml-2 ui-flex ui-items-center" },
-        React__namespace.default.createElement(Text, { inline: true, text, type: "base", color: disabled ? "slate-500" : void 0 })
-      ),
-      info && React__namespace.default.createElement(Text, { className: "ui-ml-2 ui-leading-4", text: info, type: "sm", color: disabled ? "slate-500" : void 0 })
+      text && React__namespace.default.createElement(Text, { inline: true, variant: "base", color: disabled ? "slate-500" : void 0 }, text),
+      React__namespace.default.createElement(HelperAndErrorText, { helperText: info })
     )
   );
 }
@@ -3508,6 +3510,60 @@ const FlyOutMenu = {
   SwitchItem: FlyOutMenuSwitchItem
 };
 
+const LabelText = (props) => {
+  return React__namespace.default.createElement(Text, Object.assign({}, props));
+};
+
+const LabeledRadio = React__namespace.default.forwardRef((props, ref) => {
+  const { children, label, helperText, errorText, className, inputClassName } = props, attributes = __rest(props, ["children", "label", "helperText", "errorText", "className", "inputClassName"]);
+  const { id, disabled } = attributes;
+  return React__namespace.default.createElement(
+    Stack,
+    { as: "label", axis: "x", gap: "xs", htmlFor: id, className: classNames__default.default("ui-radio-form-field-label", className) },
+    React__namespace.default.createElement(
+      "div",
+      { className: "ui-relative ui-flex ui-flex-row ui-items-center ui-self-start" },
+      React__namespace.default.createElement(Text, { "aria-hidden": true, className: "ui-w-4 ui-opacity-0" }, "CENTER"),
+      React__namespace.default.createElement(
+        "div",
+        { className: "ui-absolute" },
+        React__namespace.default.createElement(StyledRadio, Object.assign({ "aria-describedby": `${id}-helper-text ${id}-error-text` }, attributes, { ref, className: inputClassName }))
+      )
+    ),
+    React__namespace.default.createElement(
+      "div",
+      null,
+      React__namespace.default.createElement(RadioLabel, { label, disabled }, children),
+      React__namespace.default.createElement(HelperAndErrorText, { helperText, helperTextId: `${id}-helper-text`, errorText, errorTextId: `${id}-error-text` })
+    )
+  );
+});
+function RadioLabel(props) {
+  const { children, label, disabled } = props;
+  if (!label && !children) {
+    return null;
+  }
+  if (children) {
+    return children;
+  }
+  return React__namespace.default.createElement(LabelText, { color: disabled ? "slate-500" : void 0 }, label);
+}
+
+const LabeledRadioGroup = (props) => {
+  const { children, title, className, errorText, errorTextId, helperText, helperTextId } = props;
+  return React__namespace.default.createElement(
+    Stack,
+    { as: "fieldset", className: classNames__default.default(className), gap: "xxxxs" },
+    title && React__namespace.default.createElement(
+      "legend",
+      { className: "ui-contents" },
+      React__namespace.default.createElement(Text, null, title)
+    ),
+    React__namespace.default.createElement(Stack, { gap: "xxs" }, children),
+    React__namespace.default.createElement(HelperAndErrorText, { errorText, errorTextId, helperText, helperTextId })
+  );
+};
+
 const Line = ({ left, right, className }) => /* @__PURE__ */ React__namespace.default.createElement(
   "div",
   {
@@ -6731,6 +6787,8 @@ exports.ImageIcon = ImageIcon;
 exports.InfoField = InfoField;
 exports.InfoIcon = InfoIcon;
 exports.Input = Input;
+exports.LabeledRadio = LabeledRadio;
+exports.LabeledRadioGroup = LabeledRadioGroup;
 exports.LeftArrowIcon = LeftArrowIcon;
 exports.LifebuoyIcon = LifebuoyIcon;
 exports.LightBulbIcon = LightBulbIcon;
@@ -6805,6 +6863,7 @@ exports.Steps = Steps;
 exports.StopwatchIcon = StopwatchIcon;
 exports.StyledInput = StyledInput;
 exports.StyledOrderedList = StyledOrderedList;
+exports.StyledRadio = StyledRadio;
 exports.StyledUnorderedList = StyledUnorderedList;
 exports.Switch = Switch;
 exports.Switcher = Switcher;