@trail-ui/react
Version:
172 lines (167 loc) • 7.48 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/checkbox/checkbox.tsx
var checkbox_exports = {};
__export(checkbox_exports, {
Checkbox: () => _Checkbox
});
module.exports = __toCommonJS(checkbox_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/checkbox/checkbox-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 CheckboxGroupThemeContext = (0, import_react.createContext)({});
function CheckboxGroup(props, ref) {
const {
lineThrough,
orientation = "vertical",
label,
className,
classNames,
isInvalid,
children,
...otherProps
} = props;
const slots = (0, import_react.useMemo)(() => (0, import_theme.checkboxGroup)(), []);
const baseStyles = (0, import_shared_utils.clsx)(classNames == null ? void 0 : classNames.base, className);
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_aria_components.CheckboxGroup, { 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",
{
"data-orientation": orientation,
className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }),
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckboxGroupThemeContext.Provider, { value: { isInvalid, lineThrough }, 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 _CheckboxGroup = (0, import_react.forwardRef)(CheckboxGroup);
// src/checkbox/checkbox-icon.tsx
var import_jsx_runtime2 = require("react/jsx-runtime");
function CheckIcon(props) {
const { isSelected } = props;
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { "aria-hidden": "true", role: "presentation", viewBox: "0 0 17 18", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"polyline",
{
fill: "none",
points: "1 9 7 14 15 4",
stroke: "currentColor",
strokeDasharray: 22,
strokeDashoffset: isSelected ? 44 : 66,
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 2,
style: isSelected ? {
transition: "stroke-dashoffset 250ms linear 0s"
} : {}
}
) });
}
function IndeterminateIcon() {
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { stroke: "white", strokeWidth: 3, viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "21", x2: "3", y1: "12", y2: "12" }) });
}
function CheckboxIcon(props) {
const { isIndeterminate, ...otherProps } = props;
const BaseIcon = isIndeterminate ? IndeterminateIcon : CheckIcon;
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(BaseIcon, { ...otherProps });
}
// src/checkbox/checkbox.tsx
var import_jsx_runtime3 = require("react/jsx-runtime");
function Checkbox(props, ref) {
var _a, _b;
const groupThemeContext = (0, import_react2.useContext)(CheckboxGroupThemeContext);
const {
icon = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CheckboxIcon, {}),
lineThrough = (_a = groupThemeContext == null ? void 0 : groupThemeContext.lineThrough) != null ? _a : false,
isInvalid = (_b = groupThemeContext == null ? void 0 : groupThemeContext.isInvalid) != null ? _b : false,
className,
classNames,
children,
...otherProps
} = props;
const slots = (0, import_react2.useMemo)(
() => (0, import_theme2.checkbox)({
lineThrough,
isInvalid
}),
[isInvalid, lineThrough]
);
const baseStyles = (0, import_shared_utils2.clsx)(classNames == null ? void 0 : classNames.base, className);
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_aria_components2.Checkbox, { ref, className: slots.base({ class: baseStyles }), ...otherProps, children: (renderProps) => {
const iconProps = {
"data-checked": String(renderProps.isSelected),
isSelected: renderProps.isSelected,
isIndeterminate: renderProps.isIndeterminate,
isInvalid: renderProps.isInvalid,
className: slots.icon({ class: classNames == null ? void 0 : classNames.icon })
};
const clonedIcon = typeof icon === "function" ? icon(iconProps) : (0, import_react2.cloneElement)(icon, iconProps);
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"span",
{
"aria-hidden": "true",
className: slots.control({ class: classNames == null ? void 0 : classNames.control }),
"data-indeterminate": props.isIndeterminate,
children: clonedIcon
}
),
children && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: typeof children === "function" ? children(renderProps) : children })
] });
} });
}
var _Checkbox = (0, import_react2.forwardRef)(Checkbox);
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
Checkbox
});