@luscii-healthtech/web-ui 61.0.1 → 62.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/components/Radio/LabeledRadioCard.js +18 -7
- package/dist/esm/components/Radio/LabeledRadioCard.js.map +1 -1
- package/dist/index.development.js +18 -6
- package/dist/index.development.js.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/src/components/Radio/LabeledRadioCard.d.ts +7 -2
- package/dist/src/generated/components/Radio/LabeledRadioCard.d.ts +7 -2
- package/dist/stories/LabeledRadio.stories.d.ts +7 -0
- package/dist/stories/PopoverRadioCardRecipe.stories.d.ts +0 -3
- package/dist/web-ui-tailwind.css +0 -10
- package/package.json +2 -2
|
@@ -3,12 +3,10 @@ import { jsxs, jsx } from 'react/jsx-runtime';
|
|
|
3
3
|
import React__default from 'react';
|
|
4
4
|
import classNames from 'classnames';
|
|
5
5
|
import { Stack } from '../Stack/Stack.js';
|
|
6
|
-
import { LabelText } from '../forms/shared/LabelText.js';
|
|
7
6
|
import { Text } from '../Text/Text.js';
|
|
8
7
|
|
|
9
8
|
const isChildrenProps = (props) => "children" in props;
|
|
10
9
|
const RadioCardBase = React__default.forwardRef(({ id, disabled, className, inputClassName, aside, inputAttrs, hasSubtitle, children }, ref) => {
|
|
11
|
-
const semanticId = React__default.useId();
|
|
12
10
|
return jsxs(Stack, { as: "label", axis: "x", htmlFor: id, _py: hasSubtitle ? "base" : "l", _px: "l", justify: "between", align: "center", className: classNames(
|
|
13
11
|
"ui:cursor-pointer",
|
|
14
12
|
{
|
|
@@ -33,24 +31,37 @@ const RadioCardBase = React__default.forwardRef(({ id, disabled, className, inpu
|
|
|
33
31
|
// Checked and hovered styles
|
|
34
32
|
"ui:has-checked:not-has-disabled:bg-background-neutral-secondary-hovered ui:has-checked:not-has-disabled:ring-2 ui:hover:has-checked:not-has-disabled:ring-border-brand-primary-hovered",
|
|
35
33
|
className
|
|
36
|
-
), children: [jsx("input", Object.assign({ type: "radio"
|
|
34
|
+
), children: [jsx("input", Object.assign({ type: "radio" }, inputAttrs, { ref, className: classNames("ui:sr-only", inputClassName) })), jsx("span", { className: classNames("ui:flex ui:flex-1 ui:flex-col ui:min-w-0", {
|
|
37
35
|
"ui:[&_*]:!text-text-neutral-primary-disabled": disabled
|
|
38
|
-
}), children }), aside && jsx("
|
|
36
|
+
}), children }), aside && jsx("span", { className: classNames({
|
|
39
37
|
"ui:[&_*]:!text-text-neutral-primary-disabled": disabled
|
|
40
38
|
}), children: aside })] });
|
|
41
39
|
});
|
|
42
40
|
RadioCardBase.displayName = "RadioCardBase";
|
|
43
41
|
const LabeledRadioCardWithProps = React__default.forwardRef((props, ref) => {
|
|
44
|
-
const { className, inputClassName, aside, label, subtitle, leadingIcon } = props, inputAttrs = __rest(props, ["className", "inputClassName", "aside", "label", "subtitle", "leadingIcon"]);
|
|
42
|
+
const { className, inputClassName, aside, label, subtitle, leadingIcon, "aria-describedby": ariaDescribedBy } = props, inputAttrs = __rest(props, ["className", "inputClassName", "aside", "label", "subtitle", "leadingIcon", "aria-describedby"]);
|
|
45
43
|
const { id, disabled } = inputAttrs;
|
|
46
44
|
const hasSubtitle = subtitle !== void 0;
|
|
47
|
-
|
|
45
|
+
const subtitleId = React__default.useId();
|
|
46
|
+
return jsx(RadioCardBase, { id, disabled, className, inputClassName, aside, inputAttrs: Object.assign(Object.assign({}, inputAttrs), { "aria-describedby": classNames(ariaDescribedBy, hasSubtitle && subtitleId) || void 0 }), hasSubtitle, ref, children: jsxs(Stack, { as: "span", axis: "x", _gap: "base", align: "center", children: [leadingIcon, jsxs(Stack, { as: "span", axis: "y", _gap: "xs", align: "stretch", className: "ui:flex-1 ui:min-w-0", children: [typeof label === "string" ? jsx(Text, { variant: "body-base-regular", children: label }) : label, hasSubtitle && jsx("span", { id: subtitleId, "aria-hidden": true, className: "ui:flex ui:flex-col", children: typeof subtitle === "string" ? jsx(Text, { variant: "body-small-light", color: "neutral-secondary", children: subtitle }) : subtitle })] })] }) });
|
|
48
47
|
});
|
|
49
48
|
LabeledRadioCardWithProps.displayName = "LabeledRadioCardWithProps";
|
|
50
49
|
const LabeledRadioCardWithChildren = React__default.forwardRef((props, ref) => {
|
|
51
50
|
const { className, inputClassName, aside, children } = props, inputAttrs = __rest(props, ["className", "inputClassName", "aside", "children"]);
|
|
52
51
|
const { id, disabled } = inputAttrs;
|
|
53
|
-
return jsx(RadioCardBase, {
|
|
52
|
+
return jsx(RadioCardBase, {
|
|
53
|
+
id,
|
|
54
|
+
disabled,
|
|
55
|
+
className,
|
|
56
|
+
inputClassName,
|
|
57
|
+
aside,
|
|
58
|
+
inputAttrs,
|
|
59
|
+
// The card can't tell how many lines `children` has, so it keeps the
|
|
60
|
+
// compact padding of a card with a subtitle
|
|
61
|
+
hasSubtitle: true,
|
|
62
|
+
ref,
|
|
63
|
+
children
|
|
64
|
+
});
|
|
54
65
|
});
|
|
55
66
|
LabeledRadioCardWithChildren.displayName = "LabeledRadioCardWithChildren";
|
|
56
67
|
const LabeledRadioCard = React__default.forwardRef((props, ref) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LabeledRadioCard.js","sources":["../../../../../../src/components/Radio/LabeledRadioCard.tsx"],"sourcesContent":[null],"names":["React","_jsxs","_jsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"LabeledRadioCard.js","sources":["../../../../../../src/components/Radio/LabeledRadioCard.tsx"],"sourcesContent":[null],"names":["React","_jsxs","_jsx"],"mappings":"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"}
|
|
@@ -2163,7 +2163,6 @@ const LabeledCheckboxCardGroup = (props) => {
|
|
|
2163
2163
|
|
|
2164
2164
|
const isChildrenProps = (props) => "children" in props;
|
|
2165
2165
|
const RadioCardBase = React__namespace.default.forwardRef(({ id, disabled, className, inputClassName, aside, inputAttrs, hasSubtitle, children }, ref) => {
|
|
2166
|
-
const semanticId = React__namespace.default.useId();
|
|
2167
2166
|
return jsxRuntime.jsxs(Stack, { as: "label", axis: "x", htmlFor: id, _py: hasSubtitle ? "base" : "l", _px: "l", justify: "between", align: "center", className: classNames__default.default(
|
|
2168
2167
|
"ui:cursor-pointer",
|
|
2169
2168
|
{
|
|
@@ -2188,24 +2187,37 @@ const RadioCardBase = React__namespace.default.forwardRef(({ id, disabled, class
|
|
|
2188
2187
|
// Checked and hovered styles
|
|
2189
2188
|
"ui:has-checked:not-has-disabled:bg-background-neutral-secondary-hovered ui:has-checked:not-has-disabled:ring-2 ui:hover:has-checked:not-has-disabled:ring-border-brand-primary-hovered",
|
|
2190
2189
|
className
|
|
2191
|
-
), children: [jsxRuntime.jsx("input", Object.assign({ type: "radio"
|
|
2190
|
+
), children: [jsxRuntime.jsx("input", Object.assign({ type: "radio" }, inputAttrs, { ref, className: classNames__default.default("ui:sr-only", inputClassName) })), jsxRuntime.jsx("span", { className: classNames__default.default("ui:flex ui:flex-1 ui:flex-col ui:min-w-0", {
|
|
2192
2191
|
"ui:[&_*]:!text-text-neutral-primary-disabled": disabled
|
|
2193
|
-
}), children }), aside && jsxRuntime.jsx("
|
|
2192
|
+
}), children }), aside && jsxRuntime.jsx("span", { className: classNames__default.default({
|
|
2194
2193
|
"ui:[&_*]:!text-text-neutral-primary-disabled": disabled
|
|
2195
2194
|
}), children: aside })] });
|
|
2196
2195
|
});
|
|
2197
2196
|
RadioCardBase.displayName = "RadioCardBase";
|
|
2198
2197
|
const LabeledRadioCardWithProps = React__namespace.default.forwardRef((props, ref) => {
|
|
2199
|
-
const { className, inputClassName, aside, label, subtitle, leadingIcon } = props, inputAttrs = __rest(props, ["className", "inputClassName", "aside", "label", "subtitle", "leadingIcon"]);
|
|
2198
|
+
const { className, inputClassName, aside, label, subtitle, leadingIcon, "aria-describedby": ariaDescribedBy } = props, inputAttrs = __rest(props, ["className", "inputClassName", "aside", "label", "subtitle", "leadingIcon", "aria-describedby"]);
|
|
2200
2199
|
const { id, disabled } = inputAttrs;
|
|
2201
2200
|
const hasSubtitle = subtitle !== void 0;
|
|
2202
|
-
|
|
2201
|
+
const subtitleId = React__namespace.default.useId();
|
|
2202
|
+
return jsxRuntime.jsx(RadioCardBase, { id, disabled, className, inputClassName, aside, inputAttrs: Object.assign(Object.assign({}, inputAttrs), { "aria-describedby": classNames__default.default(ariaDescribedBy, hasSubtitle && subtitleId) || void 0 }), hasSubtitle, ref, children: jsxRuntime.jsxs(Stack, { as: "span", axis: "x", _gap: "base", align: "center", children: [leadingIcon, jsxRuntime.jsxs(Stack, { as: "span", axis: "y", _gap: "xs", align: "stretch", className: "ui:flex-1 ui:min-w-0", children: [typeof label === "string" ? jsxRuntime.jsx(Text, { variant: "body-base-regular", children: label }) : label, hasSubtitle && jsxRuntime.jsx("span", { id: subtitleId, "aria-hidden": true, className: "ui:flex ui:flex-col", children: typeof subtitle === "string" ? jsxRuntime.jsx(Text, { variant: "body-small-light", color: "neutral-secondary", children: subtitle }) : subtitle })] })] }) });
|
|
2203
2203
|
});
|
|
2204
2204
|
LabeledRadioCardWithProps.displayName = "LabeledRadioCardWithProps";
|
|
2205
2205
|
const LabeledRadioCardWithChildren = React__namespace.default.forwardRef((props, ref) => {
|
|
2206
2206
|
const { className, inputClassName, aside, children } = props, inputAttrs = __rest(props, ["className", "inputClassName", "aside", "children"]);
|
|
2207
2207
|
const { id, disabled } = inputAttrs;
|
|
2208
|
-
return jsxRuntime.jsx(RadioCardBase, {
|
|
2208
|
+
return jsxRuntime.jsx(RadioCardBase, {
|
|
2209
|
+
id,
|
|
2210
|
+
disabled,
|
|
2211
|
+
className,
|
|
2212
|
+
inputClassName,
|
|
2213
|
+
aside,
|
|
2214
|
+
inputAttrs,
|
|
2215
|
+
// The card can't tell how many lines `children` has, so it keeps the
|
|
2216
|
+
// compact padding of a card with a subtitle
|
|
2217
|
+
hasSubtitle: true,
|
|
2218
|
+
ref,
|
|
2219
|
+
children
|
|
2220
|
+
});
|
|
2209
2221
|
});
|
|
2210
2222
|
LabeledRadioCardWithChildren.displayName = "LabeledRadioCardWithChildren";
|
|
2211
2223
|
const LabeledRadioCard = React__namespace.default.forwardRef((props, ref) => {
|