@cambly/syntax-core 7.2.0 → 7.4.0

package/dist/index.d.ts

@@ -568,7 +568,7 @@ declare namespace Divider {
 /**
  * [Heading](https://cambly-syntax.vercel.app/?path=/docs/components-heading--docs) enforces a consistent style & accessibility best practices for headings.
  */
-declare const Heading: ({ align, as, children, color, size, }: {
+declare const Heading: ({ align, as, children, color, "data-testid": dataTestId, size, }: {
     /**
      * Aligns the text to the left, right, or center of the container.
      * * `start` and `end` will align the text to the left or right of the container depending on the locale.
@@ -593,6 +593,10 @@ declare const Heading: ({ align, as, children, color, size, }: {
      * @defaultValue "gray900"
      */
     color?: "gray200" | "gray900" | "primary" | "secondary" | "tertiary" | "destructive-primary" | "destructive-secondary" | "destructive-tertiary" | "branded" | "success" | "gray700" | "gray800" | "white" | "inherit" | undefined;
+    /**
+     * Test id for the text.
+     */
+    "data-testid"?: string | undefined;
     /**
      * Size of the text.
      *
@@ -657,10 +661,7 @@ type IconButtonProps = {
  */
 declare const IconButton: React__default.ForwardRefExoticComponent<IconButtonProps & React__default.RefAttributes<HTMLButtonElement>>;
 
-/**
- * [LinkButton](https://cambly-syntax.vercel.app/?path=/docs/components-linkbutton--docs) is a "variation" of Button that should look identical to Button, but should be used to render links instead.
- */
-declare function LinkButton({ text, href, target, rel, "data-testid": dataTestId, color, size, fullWidth, startIcon: StartIcon, endIcon: EndIcon, onClick, }: {
+type LinkButtonProps = {
     /**
      * Test id for the button
      */
@@ -722,7 +723,11 @@ declare function LinkButton({ text, href, target, rel, "data-testid": dataTestId
      * An optional onClick event. This is used for certain wrapper's support (such as react-router-dom).
      */
     onClick?: React__default.MouseEventHandler<HTMLAnchorElement>;
-}): JSX.Element;
+};
+/**
+ * [LinkButton](https://cambly-syntax.vercel.app/?path=/docs/components-linkbutton--docs) is a "variation" of Button that should look identical to Button, but should be used to render links instead.
+ */
+declare const LinkButton: React__default.ForwardRefExoticComponent<LinkButtonProps & React__default.RefAttributes<HTMLAnchorElement>>;
 
 /**
  * [MiniActionCard](https://cambly-syntax.vercel.app/?path=/docs/components-miniactioncard--docs) is component that alerts users to a call to action.
@@ -1034,7 +1039,7 @@ declare function TextField({ autoComplete, "data-testid": dataTestId, disabled,
 /**
  * [Typography](https://cambly-syntax.vercel.app/?path=/docs/components-typography--docs) is a component that renders text.
  */
-declare const Typography: ({ align, as, children, color, inline, lineClamp, size, tooltip, transform, underline, weight, }: {
+declare const Typography: ({ align, as, children, color, "data-testid": dataTestId, inline, lineClamp, size, tooltip, transform, underline, weight, }: {
     /**
      * Aligns the text to the left, right, or center of the container.
      * * `start` and `end` will align the text to the left or right of the container depending on the locale.
@@ -1059,6 +1064,10 @@ declare const Typography: ({ align, as, children, color, inline, lineClamp, size
      * @defaultValue "gray900"
      */
     color?: "gray200" | "gray900" | "primary" | "secondary" | "tertiary" | "destructive-primary" | "destructive-secondary" | "destructive-tertiary" | "branded" | "success" | "gray700" | "gray800" | "white" | "inherit" | undefined;
+    /**
+     * Test id for the text
+     */
+    "data-testid"?: string | undefined;
     /**
      * Whether the text should flow inline with other elements.
      *

package/dist/index.js

@@ -123,7 +123,7 @@ __export(src_exports, {
   Divider: () => Divider,
   Heading: () => Heading_default,
   IconButton: () => IconButton_default,
-  LinkButton: () => LinkButton,
+  LinkButton: () => LinkButton_default,
   MiniActionCard: () => MiniActionCard_default,
   Modal: () => Modal,
   RadioButton: () => RadioButton_default,
@@ -189,6 +189,7 @@ var Typography = ({
   as = "div",
   children,
   color = "gray900",
+  "data-testid": dataTestId,
   inline = false,
   lineClamp = void 0,
   size = 200,
@@ -212,6 +213,7 @@ var Typography = ({
         underline && Typography_module_default.underline,
         lineClamp != null && Typography_module_default.lineClamp
       ),
+      "data-testid": dataTestId,
       style: {
         WebkitLineClamp: lineClamp
       },
@@ -889,10 +891,22 @@ var Heading = ({
   as = "h1",
   children,
   color = "gray900",
+  "data-testid": dataTestId,
   size = 500
 }) => {
   const weight = [700, 800].includes(size) ? "heavy" : "bold";
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Typography_default, { align, as, color, size, weight, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    Typography_default,
+    {
+      align,
+      as,
+      color,
+      "data-testid": dataTestId,
+      size,
+      weight,
+      children
+    }
+  );
 };
 var Heading_default = Heading;
 
@@ -950,6 +964,7 @@ IconButton.displayName = "IconButton";
 var IconButton_default = IconButton;
 
 // src/LinkButton/LinkButton.tsx
+var import_react6 = require("react");
 var import_classnames8 = __toESM(require_classnames());
 
 // css-module:../Button/Button.module.css#css-module
@@ -960,56 +975,66 @@ var LinkButton_module_default = { "linkButton": "_linkButton_1b3ot_1", "fitConte
 
 // src/LinkButton/LinkButton.tsx
 var import_jsx_runtime12 = require("react/jsx-runtime");
-function LinkButton({
-  text,
-  href,
-  target,
-  rel,
-  "data-testid": dataTestId,
-  color = "primary",
-  size = "md",
-  fullWidth = false,
-  startIcon: StartIcon,
-  endIcon: EndIcon,
-  onClick
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-    "a",
-    {
-      href,
-      "data-testid": dataTestId,
-      target,
-      rel,
-      className: (0, import_classnames8.default)(
-        LinkButton_module_default.linkButton,
-        Button_module_default3.button,
-        foregroundColor(color),
-        backgroundColor(color),
-        Button_module_default3[size],
-        {
-          [Button_module_default3.fullWidth]: fullWidth,
-          [LinkButton_module_default.fitContent]: !fullWidth,
-          [Button_module_default3.buttonGap]: size === "lg" || size === "md",
-          [Button_module_default3.secondaryBorder]: color === "secondary",
-          [Button_module_default3.secondaryDestructiveBorder]: color === "destructive-secondary"
-        }
-      ),
-      onClick,
-      children: [
-        StartIcon && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(StartIcon, { className: (0, import_classnames8.default)(Button_module_default3.icon, iconSize_default[size]) }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-          Typography_default,
+var LinkButton = (0, import_react6.forwardRef)(
+  ({
+    text,
+    href,
+    target,
+    rel,
+    "data-testid": dataTestId,
+    color = "primary",
+    size = "md",
+    fullWidth = false,
+    startIcon: StartIcon,
+    endIcon: EndIcon,
+    onClick
+  }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+      "a",
+      {
+        href,
+        "data-testid": dataTestId,
+        target,
+        ref,
+        rel,
+        className: (0, import_classnames8.default)(
+          LinkButton_module_default.linkButton,
+          Button_module_default3.button,
+          foregroundColor(color),
+          backgroundColor(color),
+          Button_module_default3[size],
           {
-            color: foregroundTypographyColor(color),
-            size: textVariant_default[size],
-            children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: { fontWeight: 500 }, children: text })
+            [Button_module_default3.fullWidth]: fullWidth,
+            [LinkButton_module_default.fitContent]: !fullWidth,
+            [Button_module_default3.buttonGap]: size === "lg" || size === "md",
+            [Button_module_default3.secondaryBorder]: color === "secondary",
+            [Button_module_default3.secondaryDestructiveBorder]: color === "destructive-secondary"
           }
         ),
-        EndIcon && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(EndIcon, { className: (0, import_classnames8.default)(Button_module_default3.icon, iconSize_default[size]) })
-      ]
-    }
-  );
-}
+        onClick,
+        children: [
+          StartIcon && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            StartIcon,
+            {
+              className: (0, import_classnames8.default)(Button_module_default3.icon, iconSize_default[size])
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            Typography_default,
+            {
+              color: foregroundTypographyColor(color),
+              size: textVariant_default[size],
+              children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: { fontWeight: 500 }, children: text })
+            }
+          ),
+          EndIcon && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(EndIcon, { className: (0, import_classnames8.default)(Button_module_default3.icon, iconSize_default[size]) })
+        ]
+      }
+    );
+  }
+);
+LinkButton.displayName = "LinkButton";
+var LinkButton_default = LinkButton;
 
 // css-module:./MiniActionCard.module.css#css-module
 var MiniActionCard_module_default = { "miniActionCard": "_miniActionCard_qebkn_1", "card": "_card_qebkn_9" };
@@ -1025,7 +1050,7 @@ var MiniActionCard_default = MiniActionCard;
 var import_classnames9 = __toESM(require_classnames());
 
 // src/Modal/FocusTrap.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 var import_jsx_runtime14 = require("react/jsx-runtime");
 function queryFocusableAll(el) {
   const selector = [
@@ -1055,9 +1080,9 @@ var focusElement = (el) => {
 function FocusTrap({
   children
 }) {
-  const elRef = (0, import_react6.useRef)(null);
-  const previouslyFocusedElRef = (0, import_react6.useRef)(null);
-  (0, import_react6.useEffect)(() => {
+  const elRef = (0, import_react7.useRef)(null);
+  const previouslyFocusedElRef = (0, import_react7.useRef)(null);
+  (0, import_react7.useEffect)(() => {
     const { current: element } = elRef;
     const focusFirstChild = () => {
       const withinIframe = window !== window.parent;
@@ -1091,9 +1116,9 @@ function FocusTrap({
 }
 
 // src/Modal/StopScroll.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 function StopScroll(props) {
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     const originalStyle = window.getComputedStyle(document.body).overflow;
     document.body.style.overflow = "hidden";
     return () => {
@@ -1214,7 +1239,7 @@ function Modal({
 Modal.displayName = "Modal";
 
 // src/RadioButton/RadioButton.tsx
-var import_react8 = require("react");
+var import_react9 = require("react");
 var import_classnames10 = __toESM(require_classnames());
 
 // css-module:./RadioButton.module.css#css-module
@@ -1234,7 +1259,7 @@ var RadioButton = ({
   size = "md",
   value
 }) => {
-  const [isFocused, setIsFocused] = (0, import_react8.useState)(false);
+  const [isFocused, setIsFocused] = (0, import_react9.useState)(false);
   const { isFocusVisible: isFocusVisible2 } = useFocusVisible();
   const sharedStyles = (0, import_classnames10.default)(RadioButton_module_default.background, RadioButton_module_default[size], {
     [RadioButton_module_default.errorBorderColor]: error,
@@ -1305,7 +1330,7 @@ var RadioButton = ({
 var RadioButton_default = RadioButton;
 
 // src/SelectList/SelectList.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 var import_classnames11 = __toESM(require_classnames());
 
 // ../syntax-design-tokens/dist/js/index.js
@@ -1345,9 +1370,9 @@ function SelectList({
   selectedValue = "",
   size = "md"
 }) {
-  const id = (0, import_react9.useId)();
+  const id = (0, import_react10.useId)();
   const { isFocusVisible: isFocusVisible2 } = useFocusVisible();
-  const [isFocused, setIsFocused] = (0, import_react9.useState)(false);
+  const [isFocused, setIsFocused] = (0, import_react10.useState)(false);
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
     "div",
     {
@@ -1415,7 +1440,7 @@ function SelectList({
 SelectList.Option = SelectOption_default;
 
 // src/TextField/TextField.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_classnames12 = __toESM(require_classnames());
 
 // css-module:./TextField.module.css#css-module
@@ -1437,7 +1462,7 @@ function TextField({
   type = "text",
   value = ""
 }) {
-  const reactId = (0, import_react10.useId)();
+  const reactId = (0, import_react11.useId)();
   const inputId = id != null ? id : reactId;
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
     Box_default,