@trail-ui/react
Version:
131 lines (127 loc) • 6.46 kB
JavaScript
;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/radio/radio.tsx
var radio_exports = {};
__export(radio_exports, {
Radio: () => _Radio
});
module.exports = __toCommonJS(radio_exports);
var import_shared_utils2 = require("@trail-ui/shared-utils");
var import_theme2 = require("@trail-ui/theme");
var import_react2 = require("react");
var import_react_aria_components2 = require("react-aria-components");
// src/radio/radio-group.tsx
var import_shared_utils = require("@trail-ui/shared-utils");
var import_theme = require("@trail-ui/theme");
var import_react = require("react");
var import_react_aria_components = require("react-aria-components");
var import_icons = require("@trail-ui/icons");
var import_jsx_runtime = require("react/jsx-runtime");
var RadioGroupThemeContext = (0, import_react.createContext)({});
function RadioGroup(props, ref) {
const { label, className, classNames, color, size, children, ...otherProps } = props;
const slots = (0, import_react.useMemo)(() => (0, import_theme.radioGroup)(), []);
const baseStyles = (0, import_shared_utils.clsx)(classNames == null ? void 0 : classNames.base, className);
(0, import_react.useEffect)(() => {
const radioGroup2 = document.querySelector('[role="radiogroup"]');
if (radioGroup2) {
radioGroup2 == null ? void 0 : radioGroup2.removeAttribute("aria-orientation");
}
}, []);
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_aria_components.RadioGroup, { ref, className: slots.base({ class: baseStyles }), ...otherProps, children: (renderProps) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_aria_components.Label, { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }),
children && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RadioGroupThemeContext.Provider, { value: { color, size }, children: typeof children === "function" ? children(renderProps) : children }) }),
props.errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
import_react_aria_components.Text,
{
slot: "errorMessage",
className: `${slots.errorMessage({ class: classNames == null ? void 0 : classNames.errorMessage })} flex flex-row items-center gap-0.5`,
children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_icons.ErrorIcon,
{
role: "img",
"aria-label": "Error",
"aria-hidden": "false",
className: "h-4 w-4 text-red-600"
}
),
props.errorMessage
]
}
) : props.description ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_react_aria_components.Text,
{
slot: "description",
className: slots.description({ class: classNames == null ? void 0 : classNames.description }),
children: props.description
}
) : null
] }) });
}
var _RadioGroup = (0, import_react.forwardRef)(RadioGroup);
// src/radio/radio.tsx
var import_jsx_runtime2 = require("react/jsx-runtime");
function Radio(props, ref) {
var _a, _b;
const groupThemeContext = (0, import_react2.useContext)(RadioGroupThemeContext);
const {
size = (_a = groupThemeContext == null ? void 0 : groupThemeContext.size) != null ? _a : "md",
color = (_b = groupThemeContext == null ? void 0 : groupThemeContext.color) != null ? _b : "purple",
control,
isDisplayControl = true,
className,
classNames,
children,
...otherProps
} = props;
const slots = (0, import_react2.useMemo)(
() => (0, import_theme2.radio)({
color,
size
}),
[color, size]
);
const baseStyles = (0, import_shared_utils2.clsx)(classNames == null ? void 0 : classNames.base, className);
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_aria_components2.Radio, { ref, className: slots.base({ class: baseStyles }), ...otherProps, children: (renderProps) => {
const iconProps = {
"data-checked": String(renderProps.isSelected),
isSelected: renderProps.isSelected
};
let clonedControl;
if (typeof control === "function") {
clonedControl = control(iconProps);
} else if ((0, import_react2.isValidElement)(control)) {
clonedControl = (0, import_react2.cloneElement)(control, iconProps);
} else {
const controlClass = renderProps.isHovered && !renderProps.isSelected ? (0, import_shared_utils2.clsx)(classNames == null ? void 0 : classNames.control, "bg-neutral-100") : classNames == null ? void 0 : classNames.control;
clonedControl = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { "aria-hidden": "true", className: slots.control({ class: controlClass }), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: slots.point({ class: classNames == null ? void 0 : classNames.point }) }) });
}
const displayControl = isDisplayControl && clonedControl;
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
displayControl,
children && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: typeof children === "function" ? children(renderProps) : children })
] });
} });
}
var _Radio = (0, import_react2.forwardRef)(Radio);
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
Radio
});