@arc-ui/components 12.0.0-beta7 → 12.1.0

package/lib/_shared/cjs/CardFooter-PoifazZ1.cjs

@@ -0,0 +1,32 @@
+'use strict';
+
+var React = require('react');
+var index = require('./index-CTlXMLug.cjs');
+var ThemeIcon = require('./ThemeIcon-CwYN77IF.cjs');
+var index$1 = require('./index-BLRjGROQ.cjs');
+
+/** Use `CardFooter` internally within card components to display supporting actions or information at the bottom of a card. */
+var CardFooter = function (_a) {
+    var metaText = _a.metaText, _b = _a.buttonIcon, buttonIcon = _b === void 0 ? "arrow" : _b, _c = _a.buttonSize, buttonSize = _c === void 0 ? "m" : _c, _d = _a.isDarkPathway, isDarkPathway = _d === void 0 ? false : _d, _e = _a.showButton, showButton = _e === void 0 ? true : _e, _f = _a.isHovered, isHovered = _f === void 0 ? false : _f;
+    var icons = {
+        arrow: "cardRight",
+        play: "cardPlay",
+    };
+    return (React.createElement("div", { className: index.classNames("arc-CardFooter", {
+            "arc-CardFooter--darkPathway": isDarkPathway,
+        }) },
+        React.createElement("div", { className: "arc-CardFooter-metaTextContainer" }, metaText && (React.createElement("div", { className: "arc-CardFooter-metaText" }, index$1.isDate(metaText) ? (React.createElement("time", { dateTime: index$1.format(metaText, "yyyy-MM-dd") }, index$1.format(metaText, "d MMMM yyyy"))) : (React.createElement("span", null, metaText))))),
+        showButton && (React.createElement("div", null,
+            React.createElement("div", { className: index.classNames("arc-CardFooter-button", {
+                    "arc-CardFooter-button--s": buttonSize === "s",
+                }) },
+                React.createElement("div", { className: "arc-CardFooter-buttonIcon" },
+                    React.createElement("div", { className: index.classNames("arc-CardFooter-buttonIconRight", {
+                            "arc-CardFooter-buttonIconRight--isHovered": isHovered,
+                        }) },
+                        React.createElement(ThemeIcon.ThemeIcon, { icon: icons[buttonIcon] })),
+                    React.createElement("div", { className: "arc-CardFooter-buttonIconLeft" },
+                        React.createElement(ThemeIcon.ThemeIcon, { icon: icons[buttonIcon] }))))))));
+};
+
+exports.CardFooter = CardFooter;

package/lib/_shared/cjs/CardHeading-lGy1u6eD.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-CCZ3TN_7.cjs');
+var React = require('react');
+var filterAttrs = require('./filter-attrs-D19P2s1V.cjs');
+var Heading = require('./Heading-BYBmZkmS.cjs');
+
+/** Use `CardHeading` internally within card components to display a title, icon, or leading content at the top of a card. */
+var CardHeading = function (_a) {
+    var onClick = _a.onClick, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onBlur = _a.onBlur, onFocus = _a.onFocus, href = _a.href, heading = _a.heading, _b = _a.size, size = _b === void 0 ? "m" : _b, _c = _a.linkData, linkData = _c === void 0 ? {} : _c, _d = _a.headingLevel, headingLevel = _d === void 0 ? "2" : _d;
+    return (React.createElement(Heading.Heading, { level: headingLevel, size: size, isWordWrap: false }, href ? (React.createElement("a", tslib_es6.__assign({ className: "arc-CardHeading-link", href: href, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onFocus: onFocus, onBlur: onBlur }, filterAttrs.filterAttrs(linkData)), heading)) : (heading)));
+};
+
+exports.CardHeading = CardHeading;

package/lib/_shared/cjs/CheckboxIcon-BTkdXfpp.cjs

@@ -0,0 +1,53 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-CCZ3TN_7.cjs');
+var React = require('react');
+var index = require('./index-CTlXMLug.cjs');
+var ThemeIcon = require('./ThemeIcon-CwYN77IF.cjs');
+var Surface = require('./Surface-DIU5ciDT.cjs');
+var FormControl = require('./FormControl-TtboqHRx.cjs');
+
+/** Use `CheckboxIcon` to display a visual checkbox indicator that reflects a checked, unchecked, or indeterminate state. */
+var CheckboxIcon = function (_a) {
+    var id = _a.id, name = _a.name, checked = _a.checked, _b = _a.indeterminate, indeterminate = _b === void 0 ? false : _b, isDisabled = _a.isDisabled, isRequired = _a.isRequired, _c = _a.size, size = _c === void 0 ? "m" : _c, value = _a.value, error = _a.error, ariaDescribedBy = _a.ariaDescribedBy, onBlur = _a.onBlur, onChange = _a.onChange, props = tslib_es6.__rest(_a, ["id", "name", "checked", "indeterminate", "isDisabled", "isRequired", "size", "value", "error", "ariaDescribedBy", "onBlur", "onChange"]);
+    var requirementStatus = React.useContext(FormControl.Context).requirementStatus;
+    var internalRef = React.useRef(null);
+    var surface = React.useContext(Surface.Context).surface;
+    React.useEffect(function () {
+        if (internalRef.current) {
+            internalRef.current.indeterminate = indeterminate;
+        }
+    }, [indeterminate, checked]);
+    var tickSize = {
+        s: 14,
+        m: 18,
+    };
+    var isControlled = typeof checked !== "undefined" && typeof onChange === "function";
+    var checkedProps = isControlled
+        ? { checked: checked }
+        : checked
+            ? { defaultChecked: true }
+            : {};
+    if (!checked && onChange) {
+        indeterminate = false;
+    }
+    if (requirementStatus === "required") {
+        isRequired = true;
+    }
+    return (React.createElement("label", { htmlFor: id, className: index.classNames({
+            "arc-CheckboxIcon": true,
+            "arc-CheckboxIcon--disabled": isDisabled,
+            "arc-CheckboxIcon--invalid": error,
+            "arc-CheckboxIcon--small": size === "s",
+            "arc-CheckboxIcon--onDarkSurface": surface === "dark",
+        }) },
+        React.createElement("input", tslib_es6.__assign({ "aria-describedby": ariaDescribedBy ? ariaDescribedBy : error ? "id-error" : undefined, "aria-invalid": error, "aria-checked": checked && !indeterminate
+                ? true
+                : indeterminate && checked
+                    ? "mixed"
+                    : false, className: index.classNames("arc-CheckboxIcon-input"), disabled: isDisabled, id: id, name: name, onBlur: onBlur, onChange: onChange, ref: internalRef, required: isRequired, type: "checkbox", value: value }, checkedProps, props)),
+        React.createElement("span", { className: index.classNames("arc-CheckboxIcon-box") }, indeterminate ? (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "none" },
+            React.createElement("rect", { x: "4", y: "8", width: "7.51", height: "1", rx: "0.5", fill: "currentColor" }))) : (React.createElement(ThemeIcon.ThemeIcon, { icon: "checkboxChecked", size: tickSize[size] })))));
+};
+
+exports.CheckboxIcon = CheckboxIcon;

package/lib/_shared/cjs/ClientSideVisible-BhW-T6kb.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+var React = require('react');
+
+var ClientSideVisible = function (_a) {
+    var children = _a.children;
+    var _b = React.useState(false), canRender = _b[0], setCanRender = _b[1];
+    React.useEffect(function () {
+        if (typeof window !== "undefined") {
+            setCanRender(true);
+        }
+    }, [setCanRender]);
+    return (React.createElement("div", { style: { visibility: canRender ? "visible" : "hidden" } }, children));
+};
+
+exports.ClientSideVisible = ClientSideVisible;