@payfit/unity-components
Version:
110 lines (109 loc) • 3.77 kB
JavaScript
import { jsx as e, jsxs as t } from "react/jsx-runtime";
//#region src/components/radio-button-group/parts/RadioIndicator.tsx
var n = {
unselected: {
enabled: { "--radio-border-color": "var(--uy-color-border-form-enabled)" },
valid: { "--radio-border-color": "var(--uy-color-border-form-enabled)" },
invalid: { "--radio-border-color": "var(--uy-color-border-form-error)" },
disabled: { "--radio-border-color": "var(--uy-color-border-form-disabled)" },
readonly: { "--radio-border-color": "var(--uy-color-border-form-disabled)" }
},
selected: {
enabled: {
"--radio-bg-color": "var(--uy-color-surface-form-active)",
"--radio-border-color": "var(--uy-color-surface-form-active)",
"--radio-dot-size": "3px",
"--radio-dot-color": "var(--uy-color-content-inverted)"
},
valid: {
"--radio-bg-color": "var(--uy-color-surface-form-active)",
"--radio-border-color": "var(--uy-color-surface-form-active)",
"--radio-dot-size": "3px",
"--radio-dot-color": "var(--uy-color-content-inverted)"
},
invalid: {
"--radio-bg-color": "var(--uy-color-surface-danger)",
"--radio-border-color": "transparent",
"--radio-dot-size": "3px",
"--radio-dot-color": "var(--uy-color-content-inverted)"
},
disabled: {
"--radio-bg-color": "var(--uy-color-surface-form-disabled)",
"--radio-border-color": "var(--uy-color-border-form-disabled)",
"--radio-dot-size": "3px",
"--radio-dot-color": "var(--uy-color-content-form-disabled)"
},
readonly: {
"--radio-bg-color": "var(--uy-color-surface-form-read-only)",
"--radio-border-color": "transparent",
"--radio-dot-size": "3px",
"--radio-dot-color": "var(--uy-color-surface-neutral-disabled)"
}
}
}, r = {
unselected: {
enabled: { "--radio-border-color": "var(--uy-color-border-form-enabled)" },
valid: { "--radio-border-color": "var(--uy-color-border-form-enabled)" },
invalid: { "--radio-border-color": "var(--uy-color-border-form-error)" },
disabled: { "--radio-border-color": "var(--uy-color-border-form-disabled)" },
readonly: { "--radio-border-color": "var(--uy-color-border-form-disabled)" }
},
selected: {
enabled: {
"--radio-border-color": "var(--uy-color-border-form-active)",
"--radio-dot-color": "var(--uy-color-surface-primary-active)"
},
valid: {
"--radio-border-color": "var(--uy-color-border-form-active)",
"--radio-dot-color": "var(--uy-color-surface-primary-active)"
},
invalid: {
"--radio-border-color": "var(--uy-color-border-form-error)",
"--radio-dot-color": "var(--uy-color-content-form-invalid)"
},
disabled: {
"--radio-border-color": "var(--uy-color-border-form-disabled)",
"--radio-dot-color": "var(--uy-color-border-form-disabled)"
},
readonly: {
"--radio-border-color": "var(--uy-color-border-form-disabled)",
"--radio-dot-color": "var(--uy-color-border-form-read-only)"
}
}
};
function i({ isSelected: e, state: t, theme: i }) {
return (i === "rebrand" ? n : r)[e ? "selected" : "unselected"][t];
}
var a = ({ isSelected: n, state: r, theme: a, className: o }) => /* @__PURE__ */ e("svg", {
width: "20",
height: "20",
viewBox: "0 0 20 20",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
style: i({
isSelected: n,
state: r,
theme: a
}),
className: o,
children: /* @__PURE__ */ t("g", {
id: "Radio input",
children: [/* @__PURE__ */ e("circle", {
id: "Background",
cx: "10",
cy: "10",
r: "7",
fill: "var(--radio-bg-color, white)",
stroke: "var(--radio-border-color, #0157B2)",
strokeWidth: "1.25"
}), /* @__PURE__ */ e("circle", {
id: "Dot",
cx: "10",
cy: "10",
style: { r: "var(--radio-dot-size, 5px)" },
fill: "var(--radio-dot-color, transparent)"
})]
})
});
//#endregion
export { a as RadioIndicator };