@luscii-healthtech/web-ui 59.2.0 → 60.0.0

package/dist/esm/components/Radio/LabeledRadio.js

@@ -8,19 +8,25 @@ import { HelperAndErrorText } from '../forms/shared/HelperAndErrorText.js';
 import { LabelText } from '../forms/shared/LabelText.js';
 import { StyledRadio } from './StyledRadio.js';
 
+const RADIO_COLUMN_CLASS_NAME = "ui:w-4";
+const RADIO_COLUMN_GAP = "m";
 const LabeledRadio = React__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;
   const semanticId = React__default.useId();
-  return jsxs(Stack, { as: "label", axis: "x", _gap: "m", htmlFor: id, className: classNames("ui:radio-form-field-label", className), children: [jsxs("div", { className: "ui:relative ui:flex ui:flex-row ui:items-center ui:self-start", children: [jsx(Text, { "aria-hidden": true, className: "ui:w-4 ui:opacity-0", children: "CENTER" }), jsx("div", { className: "ui:absolute", children: jsx(StyledRadio, Object.assign({ "aria-describedby": semanticId }, attributes, { ref, className: inputClassName })) })] }), jsxs("div", { children: [jsx(RadioLabel, { label, disabled, children }), jsx(HelperAndErrorText, { helperText, errorText, describingId: semanticId })] })] });
+  return (
+    // Always rendered, so toggling `children` doesn't remount the radio (and lose its focus or state).
+    // Without children it has no effect on the layout.
+    jsxs("div", { className: children ? "ui:flex ui:flex-col ui:items-start ui:gap-f_s" : "ui:contents", children: [jsxs(Stack, { as: "label", axis: "x", _gap: RADIO_COLUMN_GAP, htmlFor: id, className: classNames("ui:radio-form-field-label", className), children: [jsxs("div", { className: "ui:relative ui:flex ui:flex-row ui:items-center ui:self-start", children: [jsx(Text, { "aria-hidden": true, className: classNames(RADIO_COLUMN_CLASS_NAME, "ui:opacity-0"), children: "CENTER" }), jsx("div", { className: "ui:absolute", children: jsx(StyledRadio, Object.assign({ "aria-describedby": semanticId }, attributes, { ref, className: inputClassName })) })] }), jsxs("div", { children: [jsx(RadioLabel, { label, disabled }), jsx(HelperAndErrorText, { helperText, errorText, describingId: semanticId })] })] }), children ? jsxs(Stack, { axis: "x", _gap: RADIO_COLUMN_GAP, className: "ui:self-stretch", children: [jsx("div", { className: classNames(RADIO_COLUMN_CLASS_NAME, "ui:shrink-0") }), jsx("div", { className: "ui:min-w-0 ui:flex-1", children })] }) : null] })
+  );
 });
 function RadioLabel(props) {
-  const { children, label, disabled } = props;
-  if (!label && !children) {
+  const { label, disabled } = props;
+  if (!label) {
     return null;
   }
-  if (children) {
-    return children;
+  if (typeof label !== "string" && typeof label !== "number") {
+    return label;
   }
   return jsx(LabelText, { color: disabled ? "slate-500" : void 0, children: label });
 }

package/dist/esm/components/Radio/LabeledRadio.js.map

@@ -1 +1 @@
-{"version":3,"file":"LabeledRadio.js","sources":["../../../../../../src/components/Radio/LabeledRadio.tsx"],"sourcesContent":[null],"names":["React","_jsxs","_jsx"],"mappings":";;;;;;;;;;AA2EO,MAAM,YAAA,GAAeA,cAAA,CAAM,UAAA,CAChC,CAAC,OAAO,GAAA,KAAO;AACb,EAAA,MAAM,EACJ,QAAA,EACA,KAAA,EACA,YACA,SAAA,EACA,SAAA,EACA,gBAAc,GAEZ,KAAA,EADC,oBACD,KAAA,EARE,CAAA,UAAA,EAAA,OAAA,EAAA,cAAA,WAAA,EAAA,WAAA,EAAA,gBAAA,CAQL,CAAA;AACD,EAAA,MAAM,EAAE,EAAA,EAAI,QAAA,EAAQ,GAAK,UAAA;AACzB,EAAA,MAAM,UAAA,GAAaA,eAAM,KAAA;AAEzB,EAAA,OACEC,KAAC,KAAA,EAAK,EACJ,IAAG,OAAA,EACH,IAAA,EAAK,KACL,IAAA,EAAK,GAAA,EACL,SAAS,EAAA,EACT,SAAA,EAAW,WAAW,2BAAA,EAA6B,SAAS,GAAC,QAAA,EAAA,CAE7DA,cAAK,SAAA,EAAU,+DAAA,EAA+D,UAAA,CAE5EC,GAAA,CAAC,6BAAiB,SAAA,EAAU,qBAAA,EAAqB,UAAA,QAAA,EAAA,GAIjDA,GAAA,UAAK,SAAA,EAAU,aAAA,EAAa,UAC1BA,GAAA,CAAC,WAAA,sCACmB,UAAA,IACd,UAAA,EAAU,EACd,KACA,SAAA,EAAW,cAAA,MACX,CACE,CAAA,EAAA,CAAA,EAGRD,IAAA,CAAA,OAAA,EAAA,QAAA,EAAA,CACEC,GAAA,CAAC,UAAA,EAAU,EAAC,KAAA,EAAc,QAAA,EAAkB,UACjC,CAAA,EAEXA,IAAC,kBAAA,EAAkB,EACjB,YACA,SAAA,EACA,YAAA,EAAc,YAAU,CACxB,GAAA,CACE,GAAA,CAAA;AAGZ,CAAC;AASH,SAAS,WAAW,KAAA,EAAsB;AACxC,EAAA,MAAM,EAAE,QAAA,EAAU,KAAA,EAAO,QAAA,EAAQ,GAAK,KAAA;AAEtC,EAAA,IAAI,CAAC,KAAA,IAAS,CAAC,QAAA,EAAU;AACvB,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,IAAI,QAAA,EAAU;AACZ,IAAA,OAAO,QAAA;AAAA,EACT;AAEA,EAAA,OACEA,GAAA,CAAC,aAAU,KAAA,EAAO,WAAW,WAAA,GAAc,MAAA,YAAY,KAAA,EAAK,CAAA;AAEhE;;"}
+{"version":3,"file":"LabeledRadio.js","sources":["../../../../../../src/components/Radio/LabeledRadio.tsx"],"sourcesContent":[null],"names":["React","_jsxs","_jsx"],"mappings":";;;;;;;;;;AAkEA,MAAM,uBAAA,GAA0B,QAAA;AAChC,MAAM,gBAAA,GAAmB,GAAA;AAsBlB,MAAM,YAAA,GAAeA,cAAA,CAAM,UAAA,CAChC,CAAC,OAAO,GAAA,KAAO;AACb,EAAA,MAAM,EACJ,QAAA,EACA,KAAA,EACA,YACA,SAAA,EACA,SAAA,EACA,gBAAc,GAEZ,KAAA,EADC,oBACD,KAAA,EARE,CAAA,UAAA,EAAA,OAAA,EAAA,cAAA,WAAA,EAAA,WAAA,EAAA,gBAAA,CAQL,CAAA;AACD,EAAA,MAAM,EAAE,EAAA,EAAI,QAAA,EAAQ,GAAK,UAAA;AACzB,EAAA,MAAM,UAAA,GAAaA,eAAM,KAAA;AAEzB,EAAA;AAAA;AAAA;AAAA,IAGEC,IAAA,CAAA,KAAA,EAAA,EACE,SAAA,EACE,QAAA,GACI,+CAAA,GACA,aAAA,EAAa,QAAA,EAAA,CAGnBA,IAAA,CAAC,KAAA,EAAK,EACJ,IAAG,OAAA,EACH,IAAA,EAAK,GAAA,EACL,IAAA,EAAM,gBAAA,EACN,OAAA,EAAS,EAAA,EACT,SAAA,EAAW,WAAW,2BAAA,EAA6B,SAAS,CAAA,EAAC,QAAA,EAAA,CAE7DA,IAAA,CAAA,KAAA,EAAA,EAAK,WAAU,+DAAA,EAA+D,QAAA,EAAA,CAE5EC,GAAA,CAAC,IAAA,EAAI,EAAA,aAAA,EAAA,IAAA,EAEH,SAAA,EAAW,UAAA,CAAW,uBAAA,EAAyB,cAAc,CAAA,yBAK/DA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAA,EAAU,aAAA,EAAa,QAAA,EAC1BA,GAAA,CAAC,WAAA,EAAW,OAAA,MAAA,CAAA,EAAA,kBAAA,EACQ,UAAA,EAAU,EACxB,UAAA,EAAU,EACd,GAAA,EACA,WAAW,cAAA,EAAc,CAAA,CAAA,EACzB,CACE,CAAA,EAAA,CAAA,EAGRD,IAAA,CAAA,KAAA,EAAA,EAAA,QAAA,EAAA,CACEC,GAAA,CAAC,UAAA,EAAU,EAAC,KAAA,EAAc,QAAA,EAAkB,CAAA,EAC5CA,GAAA,CAAC,kBAAA,EAAkB,EACjB,UAAA,EACA,WACA,YAAA,EAAc,UAAA,GACd,CAAA,EAAA,CACE,CAAA,EAAA,CAAA,EAGP,QAAA,GACCD,IAAA,CAAC,KAAA,EAAK,EAAC,IAAA,EAAK,GAAA,EAAI,IAAA,EAAM,kBAAkB,SAAA,EAAU,iBAAA,EAAiB,QAAA,EAAA,CAEjEC,GAAA,UACE,SAAA,EAAW,WAAW,uBAAA,EAAyB,aAAa,CAAA,EAAC,CAAA,EAE/DA,GAAA,CAAA,KAAA,EAAA,EAAK,WAAU,sBAAA,YAAgC,CAAO,CAAA,EAAA,CAAA,GAEtD,IAAI,GAAA;AAAA;AAGd,CAAC;AAQH,SAAS,WAAW,KAAA,EAAsB;AACxC,EAAA,MAAM,EAAE,KAAA,EAAO,QAAA,EAAQ,GAAK,KAAA;AAE5B,EAAA,IAAI,CAAC,KAAA,EAAO;AACV,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,IAAI,OAAO,KAAA,KAAU,QAAA,IAAY,OAAO,UAAU,QAAA,EAAU;AAC1D,IAAA,OAAO,KAAA;AAAA,EACT;AAEA,EAAA,OACEA,GAAA,CAAC,aAAU,KAAA,EAAO,WAAW,WAAA,GAAc,MAAA,YAAY,KAAA,EAAK,CAAA;AAEhE;;"}

package/dist/index.development.js

@@ -2286,19 +2286,25 @@ const StyledRadio = React__namespace.default.forwardRef((props, ref) => {
   return jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx("input", Object.assign({ type: "radio" }, attributes, { className: classNames__default.default("ui:appearance-none ui:w-4 ui:h-4 ui:rounded-full ui:border ui:border-slate-300 ui:bg-white", "ui:checked:grid ui:checked:place-content-center ui:checked:before:scale-[1] ui:checked:bg-primary ui:checked:border-primary", "ui:transition-colors ui:duration-100 ui:ease-in-out", "ui:before:content-[' '] ui:before:w-1.5 ui:before:h-1.5 ui:before:bg-white ui:before:rounded ui:before:scale-[0]", "ui:before:transition-transform ui:before:duration-200 ui:before:ease-[cubic-bezier(.47,.34,.52,1.39)]", className), ref })) });
 });
 
+const RADIO_COLUMN_CLASS_NAME = "ui:w-4";
+const RADIO_COLUMN_GAP = "m";
 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;
   const semanticId = React__namespace.default.useId();
-  return jsxRuntime.jsxs(Stack, { as: "label", axis: "x", _gap: "m", htmlFor: id, className: classNames__default.default("ui:radio-form-field-label", className), children: [jsxRuntime.jsxs("div", { className: "ui:relative ui:flex ui:flex-row ui:items-center ui:self-start", children: [jsxRuntime.jsx(Text, { "aria-hidden": true, className: "ui:w-4 ui:opacity-0", children: "CENTER" }), jsxRuntime.jsx("div", { className: "ui:absolute", children: jsxRuntime.jsx(StyledRadio, Object.assign({ "aria-describedby": semanticId }, attributes, { ref, className: inputClassName })) })] }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(RadioLabel, { label, disabled, children }), jsxRuntime.jsx(HelperAndErrorText, { helperText, errorText, describingId: semanticId })] })] });
+  return (
+    // Always rendered, so toggling `children` doesn't remount the radio (and lose its focus or state).
+    // Without children it has no effect on the layout.
+    jsxRuntime.jsxs("div", { className: children ? "ui:flex ui:flex-col ui:items-start ui:gap-f_s" : "ui:contents", children: [jsxRuntime.jsxs(Stack, { as: "label", axis: "x", _gap: RADIO_COLUMN_GAP, htmlFor: id, className: classNames__default.default("ui:radio-form-field-label", className), children: [jsxRuntime.jsxs("div", { className: "ui:relative ui:flex ui:flex-row ui:items-center ui:self-start", children: [jsxRuntime.jsx(Text, { "aria-hidden": true, className: classNames__default.default(RADIO_COLUMN_CLASS_NAME, "ui:opacity-0"), children: "CENTER" }), jsxRuntime.jsx("div", { className: "ui:absolute", children: jsxRuntime.jsx(StyledRadio, Object.assign({ "aria-describedby": semanticId }, attributes, { ref, className: inputClassName })) })] }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(RadioLabel, { label, disabled }), jsxRuntime.jsx(HelperAndErrorText, { helperText, errorText, describingId: semanticId })] })] }), children ? jsxRuntime.jsxs(Stack, { axis: "x", _gap: RADIO_COLUMN_GAP, className: "ui:self-stretch", children: [jsxRuntime.jsx("div", { className: classNames__default.default(RADIO_COLUMN_CLASS_NAME, "ui:shrink-0") }), jsxRuntime.jsx("div", { className: "ui:min-w-0 ui:flex-1", children })] }) : null] })
+  );
 });
 function RadioLabel(props) {
-  const { children, label, disabled } = props;
-  if (!label && !children) {
+  const { label, disabled } = props;
+  if (!label) {
     return null;
   }
-  if (children) {
-    return children;
+  if (typeof label !== "string" && typeof label !== "number") {
+    return label;
   }
   return jsxRuntime.jsx(LabelText, { color: disabled ? "slate-500" : void 0, children: label });
 }