@arc-ui/components 12.0.0-beta.13 → 12.0.0-beta.15

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

@@ -0,0 +1,78 @@
+'use client';
+'use strict';
+
+var React = require('react');
+var index = require('./index-CTlXMLug.cjs');
+var BtIconArrowRight = require('./BtIconArrowRight-BX-bj8Y6.cjs');
+var BtIconPlayFill = require('./BtIconPlayFill-WUt-9eLl.cjs');
+var Icon = require('./Icon-DdqFr6bT.cjs');
+var index$1 = require('./index-BLRjGROQ.cjs');
+
+const BtIconPlay = (props) =>
+  /*#__PURE__*/ React.createElement(
+    "svg",
+    Object.assign(
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 32 32",
+      },
+      props,
+    ),
+    /*#__PURE__*/ React.createElement("defs", null),
+    /*#__PURE__*/ React.createElement("path", {
+      d: "M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,27A13,13,0,1,1,29,16,13.01474,13.01474,0,0,1,16,29Z",
+      fill: "currentColor",
+    }),
+    /*#__PURE__*/ React.createElement("path", {
+      d: "M20.83887,15.03955,13.66113,10.896A1.107,1.107,0,0,0,12,11.85449v8.2876a1.10534,1.10534,0,0,0,1.66113.95947L20.83887,16.957a1.10688,1.10688,0,0,0,0-1.91748Zm-.5,1.05176-7.17774,4.14453a.10437.10437,0,0,1-.10742-.00049A.10314.10314,0,0,1,13,20.14209v-8.2876a.10229.10229,0,0,1,.05371-.09277.10284.10284,0,0,1,.10742,0l7.17774,4.14307a.10421.10421,0,0,1,.05371.09375A.10285.10285,0,0,1,20.33887,16.09131Z",
+      fill: "currentColor",
+    }),
+  );
+
+const BtIconArrowRightFill = (props) =>
+  /*#__PURE__*/ React.createElement(
+    "svg",
+    Object.assign(
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 32 32",
+      },
+      props,
+    ),
+    /*#__PURE__*/ React.createElement("defs", null),
+    /*#__PURE__*/ React.createElement("path", {
+      d: "M2,16A14,14,0,1,0,16,2,14,14,0,0,0,2,16Zm16.85352-4.35352L23.207,16l-4.35351,4.35352a.5.5,0,0,1-.707-.707L21.293,16.5H9.5a.5.5,0,0,1,0-1H21.293l-3.14649-3.14648a.5.5,0,0,1,.707-.707Z",
+      fill: "currentColor",
+    }),
+  );
+
+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: {
+            regular: BtIconArrowRight.BtIconArrowRight,
+            filled: BtIconArrowRightFill,
+        },
+        play: {
+            regular: BtIconPlay,
+            filled: BtIconPlayFill.BtIconPlayFill,
+        },
+    };
+    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(Icon.Icon, { icon: icons[buttonIcon].regular })),
+                    React.createElement("div", { className: "arc-CardFooter-buttonIconLeft" },
+                        React.createElement(Icon.Icon, { icon: icons[buttonIcon].regular }))))))));
+};
+
+exports.CardFooter = CardFooter;

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

@@ -0,0 +1,12 @@
+'use strict';
+
+var filterAttrs = require('./filter-attrs-eK6E_34o.cjs');
+var React = require('react');
+var Heading = require('./Heading-BEMSkLYR.cjs');
+
+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 }, href ? (React.createElement("a", filterAttrs.__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/Checkbox-D2UQsmiB.cjs

@@ -0,0 +1,88 @@
+'use strict';
+
+var filterAttrs = require('./filter-attrs-eK6E_34o.cjs');
+var React = require('react');
+var index = require('./index-CTlXMLug.cjs');
+var FormControl = require('./FormControl-D3-JbAVb.cjs');
+var Surface = require('./Surface-BFx1yNsq.cjs');
+var ThemeIcon = require('./ThemeIcon-BoxbjTaQ.cjs');
+var VisuallyHidden = require('./VisuallyHidden-B4XCvPYP.cjs');
+
+/**
+ *  Use `Checkbox` to allow users to select individual options.
+ */
+var Checkbox = React.forwardRef(function (_a, ref) {
+    var _b = _a.checked, checked = _b === void 0 ? false : _b, errorMessage = _a.errorMessage, helper = _a.helper, id = _a.id, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isRequired, isRequired = _d === void 0 ? false : _d, label = _a.label, _e = _a.hideLabel, hideLabel = _e === void 0 ? false : _e, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, _f = _a.size, size = _f === void 0 ? "m" : _f, value = _a.value, _g = _a.checkboxAlignment, checkboxAlignment = _g === void 0 ? "center" : _g, _h = _a.indeterminate, indeterminate = _h === void 0 ? false : _h, props = filterAttrs.__rest(_a, ["checked", "errorMessage", "helper", "id", "isDisabled", "isRequired", "label", "hideLabel", "name", "onBlur", "onChange", "size", "value", "checkboxAlignment", "indeterminate"]);
+    var requirementStatus = React.useContext(FormControl.Context).requirementStatus;
+    var surface = React.useContext(Surface.Context).surface;
+    var _j = FormControl.useAriaDescribedby({
+        id: id,
+        errorMessage: errorMessage,
+    }), ariaDescribedby = _j.ariaDescribedby, idError = _j.idError;
+    var internalRef = React.useRef(null);
+    var synchronizeRefs = function (el) {
+        internalRef.current = el;
+        if (typeof ref === "object" && ref !== null) {
+            ref.current = el;
+        }
+        else if (typeof ref === "function") {
+            ref(el);
+        }
+    };
+    React.useEffect(function () {
+        if (internalRef.current) {
+            internalRef.current.indeterminate = indeterminate;
+        }
+    }, [indeterminate, checked]);
+    var tickSize = {
+        s: { width: 14, height: 11 },
+        m: { width: 18, height: 14 },
+    };
+    var idLabel = "".concat(id, "-label");
+    var checkedProps = {};
+    if (typeof onChange === "function") {
+        checkedProps.checked = checked;
+    }
+    else if (checked && !onChange) {
+        checkedProps.defaultChecked = true;
+    }
+    if (!checked && onChange) {
+        indeterminate = false;
+    }
+    if (requirementStatus === "required") {
+        isRequired = true;
+    }
+    return (React.createElement("div", { className: index.classNames({
+            "arc-Checkbox": true,
+            "arc-Checkbox--disabled": isDisabled,
+            "arc-Checkbox--invalid": errorMessage,
+            "arc-Checkbox--small": size === "s",
+            "arc-Checkbox--onDarkSurface": surface === "dark",
+        }) },
+        React.createElement("label", { id: idLabel, htmlFor: id, className: index.classNames("arc-Checkbox-label", {
+                "arc-Checkbox-label--top": checkboxAlignment === "top",
+            }) },
+            React.createElement("input", filterAttrs.__assign({ "aria-describedby": ariaDescribedby, "aria-invalid": errorMessage ? "true" : "false", "aria-checked": checked && !indeterminate
+                    ? "true"
+                    : indeterminate && checked
+                        ? "mixed"
+                        : "false", className: "arc-Checkbox-input" }, checkedProps, { disabled: isDisabled, id: id, name: name, onBlur: onBlur, onChange: onChange, ref: synchronizeRefs, required: isRequired, type: "checkbox", value: value }, filterAttrs.filterAttrs(props))),
+            React.createElement("span", { className: "arc-Checkbox-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("svg", { style: tickSize[size], viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+                React.createElement("path", { d: "M5.99459 14L0.350576 8.23277C0.126079 8.00285 0 7.69132 0 7.36653C0 7.04173 0.126079 6.7302 0.350576 6.50028C0.578979 6.27752 0.88258 6.15324 1.19832 6.15324C1.51405 6.15324 1.81765 6.27752 2.04606 6.50028L5.99459 10.535L15.9385 0.374054C16.0491 0.25703 16.1814 0.163688 16.3277 0.0994738C16.474 0.0352599 16.6313 0.00145997 16.7905 4.626e-05C16.9497 -0.00136745 17.1076 0.0296342 17.255 0.0912406C17.4023 0.152847 17.5362 0.243825 17.6488 0.358867C17.7614 0.473908 17.8504 0.610709 17.9107 0.761287C17.971 0.911865 18.0013 1.0732 18 1.23589C17.9986 1.39858 17.9655 1.55936 17.9026 1.70884C17.8398 1.85833 17.7485 1.99352 17.6339 2.10655L5.99459 14Z", fill: "currentColor" })))),
+            React.createElement("span", filterAttrs.__assign({}, (checkboxAlignment === "top" && {
+                className: "arc-Checkbox-content--marginTop",
+            })), hideLabel ? (React.createElement(VisuallyHidden.VisuallyHidden, null,
+                label,
+                !isRequired && requirementStatus !== "optional" ? (React.createElement("span", { className: "arc-Checkbox-labelOptional" }, "(optional)")) : null,
+                helper && (React.createElement("span", { className: "arc-Checkbox-helper" }, helper)))) : (React.createElement(React.Fragment, null,
+                label,
+                !isRequired && requirementStatus !== "optional" ? (React.createElement("span", { className: "arc-Checkbox-labelOptional" }, "(optional)")) : null,
+                helper && (React.createElement("span", { className: "arc-Checkbox-helper" }, helper)))))),
+        errorMessage && (React.createElement("div", { id: idError, className: "arc-Checkbox-error" },
+            React.createElement("span", { className: "arc-Checkbox-error--icon" },
+                React.createElement(ThemeIcon.ThemeIcon, { icon: "checkboxError" })),
+            errorMessage))));
+});
+
+exports.Checkbox = Checkbox;