@cambly/syntax-core 7.1.0 → 7.3.0

package/dist/index.d.ts

@@ -49,6 +49,8 @@ declare const Badge: ({ icon: Icon, text, color, }: {
     color?: "gray200" | "gray900" | "destructive700" | "orange700" | "yellow700" | "success700" | "primary700" | "purple700" | undefined;
 }) => JSX.Element;
 
+declare const colors: readonly ["black", "destructive100", "destructive200", "destructive300", "destructive700", "destructive800", "destructive900", "gray10", "gray100", "gray200", "gray30", "gray60", "gray300", "gray700", "gray80", "gray800", "gray900", "orange100", "orange200", "orange300", "orange700", "orange800", "orange900", "primary100", "primary200", "primary300", "primary700", "primary800", "primary900", "purple100", "purple200", "purple300", "purple700", "purple800", "purple900", "success100", "success200", "success300", "success700", "success800", "success900", "white", "yellow100", "yellow200", "yellow300", "yellow700", "yellow800", "yellow900"];
+
 type AlignItems = "baseline" | "center" | "end" | "start" | "stretch";
 type As = "article" | "aside" | "caption" | "div" | "figcaption" | "figure" | "footer" | "header" | "main" | "nav" | "section" | "summary";
 type Dimension = number | string;
@@ -58,14 +60,7 @@ type Gap = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
 type JustifyContent = "start" | "end" | "center" | "between" | "around" | "evenly";
 type Margin = -12 | -11 | -10 | -9 | -8 | -7 | -6 | -5 | -4 | -3 | -2 | -1 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "auto";
 type Padding = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
-/**
- * [Box](https://cambly-syntax.vercel.app/?path=/docs/components-box--docs) is primitive design component and is used by lots of other components. It keeps details like spacing, borders and colors consistent across all of Syntax.
- *
- * Passthrough props:
- *  * `aria-*`
- *  * `data-testid`
- */
-declare const Box: React$1.ForwardRefExoticComponent<{
+type BoxProps = {
     /**
      * The alignment of the box on the cross axis.
      *
@@ -73,21 +68,21 @@ declare const Box: React$1.ForwardRefExoticComponent<{
      * * `smAlignItems`
      * * `lgAlignItems`
      */
-    alignItems?: AlignItems | undefined;
+    alignItems?: AlignItems;
     /**
      * Allows the default alignment (or the one specified by align-items) to be overridden for individual flex items.
      */
-    alignSelf?: "baseline" | "center" | "end" | "start" | "stretch" | "auto" | undefined;
+    alignSelf?: "auto" | "start" | "end" | "center" | "baseline" | "stretch";
     /**
      * The underlying DOM element usually set for accessibility or SEO reasons.
      *
      * @defaultValue "div"
      */
-    as?: As | undefined;
+    as?: As;
     /**
      * The background color of the box.
      */
-    backgroundColor?: "gray200" | "gray900" | "destructive700" | "orange700" | "yellow700" | "success700" | "primary700" | "purple700" | "black" | "destructive100" | "destructive200" | "destructive300" | "destructive800" | "destructive900" | "gray10" | "gray100" | "gray30" | "gray60" | "gray300" | "gray700" | "gray80" | "gray800" | "orange100" | "orange200" | "orange300" | "orange800" | "orange900" | "primary100" | "primary200" | "primary300" | "primary800" | "primary900" | "purple100" | "purple200" | "purple300" | "purple800" | "purple900" | "success100" | "success200" | "success300" | "success800" | "success900" | "white" | "yellow100" | "yellow200" | "yellow300" | "yellow800" | "yellow900" | undefined;
+    backgroundColor?: (typeof colors)[number];
     /**
      * The children to be rendered inside the box.
      */
@@ -99,7 +94,7 @@ declare const Box: React$1.ForwardRefExoticComponent<{
      */
     dangerouslySetInlineStyle?: {
         __style: Record<string, string | number | null>;
-    } | undefined;
+    };
     /**
      * The flex direction of the box.
      *
@@ -109,7 +104,7 @@ declare const Box: React$1.ForwardRefExoticComponent<{
      *
      * @defaultValue `row`
      */
-    direction?: Direction | undefined;
+    direction?: Direction;
     /**
      * The display property specifies the display behavior (the type of rendering box) of an element.
      *
@@ -119,7 +114,7 @@ declare const Box: React$1.ForwardRefExoticComponent<{
      *
      * @defaultValue `block`
      */
-    display?: Display | undefined;
+    display?: Display;
     /**
      * Sets the flex behavior of a flex item.
      *
@@ -129,69 +124,69 @@ declare const Box: React$1.ForwardRefExoticComponent<{
      *
      * @defaultValue `shrink`
      */
-    flex?: "none" | "shrink" | "grow" | undefined;
+    flex?: "none" | "shrink" | "grow";
     /**
      * By default, flex items will all try to fit onto one line. But if you specify `flexWrap="wrap"`, the flex items will wrap onto multiple lines.
      *
      * @defaultValue `nowrap`
      */
-    flexWrap?: "wrap" | "nowrap" | undefined;
+    flexWrap?: "wrap" | "nowrap";
     /**
      * The gap between the children of the box.
      */
-    gap?: Gap | undefined;
+    gap?: Gap;
     /**
      * The id of the element.
      */
-    id?: string | undefined;
+    id?: string;
     /**
      * The alignment of the box on the cross axis on lg (960px) or larger viewports.
      */
-    lgAlignItems?: AlignItems | undefined;
+    lgAlignItems?: AlignItems;
     /**
      * The flex direction on lg (960px) or larger viewports.
      */
-    lgDirection?: Direction | undefined;
+    lgDirection?: Direction;
     /**
      * The display style on lg (960px) or larger viewports.
      */
-    lgDisplay?: Display | undefined;
+    lgDisplay?: Display;
     /**
      * The alignment of the box on the cross axis on lg (960px) or larger viewports.
      */
-    lgJustifyContent?: JustifyContent | undefined;
+    lgJustifyContent?: JustifyContent;
     /**
      * Margin on lg (960px) or larger viewports.
      */
-    lgMargin?: Margin | undefined;
+    lgMargin?: Margin;
     /**
      * Bottom margin on lg (960px) or larger viewports.
      */
-    lgMarginBottom?: Margin | undefined;
+    lgMarginBottom?: Margin;
     /**
      * Margin to the right in left-to-right languages, and to the left in right-to-left languages on lg (960px) or larger viewports.
      */
-    lgMarginEnd?: Margin | undefined;
+    lgMarginEnd?: Margin;
     /**
      * Margin to the left in left-to-right languages, and to the right in right-to-left languages on lg (960px) or larger viewports.
      */
-    lgMarginStart?: Margin | undefined;
+    lgMarginStart?: Margin;
     /**
      * Top margin on lg (960px) or larger viewports.
      */
-    lgMarginTop?: Margin | undefined;
+    lgMarginTop?: Margin;
     /**
      * The padding of the box on lg (960px) or larger viewports.
      */
-    lgPadding?: Padding | undefined;
+    lgPadding?: Padding;
     /**
      * The padding of the box on the x-axis on lg (960px) or larger viewports.
      */
-    lgPaddingX?: Padding | undefined;
+    lgPaddingX?: Padding;
     /**
      * The padding of the box on the y-axis on lg (960px) or larger viewports.
      */
-    lgPaddingY?: Padding | undefined;
+    lgPaddingY?: Padding;
     /**
      * The margin of the box.
      *
@@ -201,7 +196,7 @@ declare const Box: React$1.ForwardRefExoticComponent<{
      *
      * @defaultValue 0
      */
-    margin?: Margin | undefined;
+    margin?: Margin;
     /**
      * Bottom margin of the box.
      *
@@ -210,7 +205,7 @@ declare const Box: React$1.ForwardRefExoticComponent<{
      * * `lgMarginBottom`
      *
      */
-    marginBottom?: Margin | undefined;
+    marginBottom?: Margin;
     /**
      * Margin to the right in left-to-right languages, and to the left in right-to-left languages.
      *
@@ -219,7 +214,7 @@ declare const Box: React$1.ForwardRefExoticComponent<{
      * * `lgMarginEnd`
      *
      */
-    marginEnd?: Margin | undefined;
+    marginEnd?: Margin;
     /**
      * Margin to the left in left-to-right languages, and to the right in right-to-left languages.
      *
@@ -228,7 +223,7 @@ declare const Box: React$1.ForwardRefExoticComponent<{
      * * `lgMarginStart`
      *
      */
-    marginStart?: Margin | undefined;
+    marginStart?: Margin;
     /**
      * Top margin of the box.
      *
@@ -237,27 +232,27 @@ declare const Box: React$1.ForwardRefExoticComponent<{
      * * `lgMarginTop`
      *
      */
-    marginTop?: Margin | undefined;
+    marginTop?: Margin;
     /**
      * The maximum height of the box.
      */
-    maxHeight?: Dimension | undefined;
+    maxHeight?: Dimension;
     /**
      * The maximum width of the box.
      */
-    maxWidth?: Dimension | undefined;
+    maxWidth?: Dimension;
     /**
      * The minimum height of the box.
      */
-    minHeight?: Dimension | undefined;
+    minHeight?: Dimension;
     /**
      * The minimum width of the box.
      */
-    minWidth?: Dimension | undefined;
+    minWidth?: Dimension;
     /**
      * The height of the box.
      */
-    height?: Dimension | undefined;
+    height?: Dimension;
     /**
      * The alignment of the box on the main axis.
      *
@@ -267,7 +262,7 @@ declare const Box: React$1.ForwardRefExoticComponent<{
      *
      * @defaultValue "start"
      */
-    justifyContent?: JustifyContent | undefined;
+    justifyContent?: JustifyContent;
     /**
      * The padding of the box.
      *
@@ -277,7 +272,7 @@ declare const Box: React$1.ForwardRefExoticComponent<{
      *
      * @defaultValue 0
      */
-    padding?: Padding | undefined;
+    padding?: Padding;
     /**
      * The padding of the box on the x-axis.
      *
@@ -286,7 +281,7 @@ declare const Box: React$1.ForwardRefExoticComponent<{
      * * `lgPaddingX`
      *
      */
-    paddingX?: Padding | undefined;
+    paddingX?: Padding;
     /**
      * The padding of the box on the y-axis.
      *
@@ -294,19 +289,19 @@ declare const Box: React$1.ForwardRefExoticComponent<{
      * * `smPaddingY`
      * * `lgPaddingY`
      */
-    paddingY?: Padding | undefined;
+    paddingY?: Padding;
     /**
      * The position of the box.
      *
      * @defaultValue "static"
      */
-    position?: "absolute" | "fixed" | "relative" | "static" | "sticky" | undefined;
+    position?: "absolute" | "fixed" | "relative" | "static" | "sticky";
     /**
      * The role attribute of the box.
      *
      * See [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles) for the list of valid roles.
      */
-    role?: AriaRole | undefined;
+    role?: AriaRole;
     /**
      * Border radius of the box.
      *
@@ -319,65 +314,73 @@ declare const Box: React$1.ForwardRefExoticComponent<{
      *
      * @defaultValue "none"
      */
-    rounding?: "sm" | "md" | "lg" | "xl" | "none" | "full" | undefined;
+    rounding?: "xl" | "lg" | "md" | "sm" | "full" | "none";
     /**
      * The alignment of the box on the cross axis on sm (480px) or larger viewports.
      */
-    smAlignItems?: AlignItems | undefined;
+    smAlignItems?: AlignItems;
     /**
      * The flex direction on sm (480px) or larger viewports.
      */
-    smDirection?: Direction | undefined;
+    smDirection?: Direction;
     /**
      * The display style on sm (480px) or larger viewports.
      */
-    smDisplay?: Display | undefined;
+    smDisplay?: Display;
     /**
      * The alignment of the box on the main axis on sm (480px) or larger viewports.
      */
-    smJustifyContent?: JustifyContent | undefined;
+    smJustifyContent?: JustifyContent;
     /**
      * Margin on sm (480px) or larger viewports.
      */
-    smMargin?: Margin | undefined;
+    smMargin?: Margin;
     /**
      * Bottom margin on sm (480px) or larger viewports.
      */
-    smMarginBottom?: Margin | undefined;
+    smMarginBottom?: Margin;
     /**
      * Margin to the right in left-to-right languages, and to the left in right-to-left languages on sm (480px) or larger viewports.
      */
-    smMarginEnd?: Margin | undefined;
+    smMarginEnd?: Margin;
     /**
      * Margin to the left in left-to-right languages, and to the right in right-to-left languages on sm (480px) or larger viewports.
      */
-    smMarginStart?: Margin | undefined;
+    smMarginStart?: Margin;
     /**
      * Top margin on sm (480px) or larger viewports.
      */
-    smMarginTop?: Margin | undefined;
+    smMarginTop?: Margin;
     /**
      * The padding of the box on sm (480px) or larger viewports.
      */
-    smPadding?: Padding | undefined;
+    smPadding?: Padding;
     /**
      * The padding of the box on the x-axis on sm (480px) or larger viewports.
      */
-    smPaddingX?: Padding | undefined;
+    smPaddingX?: Padding;
     /**
      * The padding of the box on the y-axis on sm (480px) or larger viewports.
      */
-    smPaddingY?: Padding | undefined;
+    smPaddingY?: Padding;
     /**
      * The width of the box.
      */
-    width?: Dimension | undefined;
-} & React$1.RefAttributes<HTMLDivElement>>;
+    width?: Dimension;
+};
+/**
+ * [Box](https://cambly-syntax.vercel.app/?path=/docs/components-box--docs) is primitive design component and is used by lots of other components. It keeps details like spacing, borders and colors consistent across all of Syntax.
+ *
+ * Passthrough props:
+ *  * `aria-*`
+ *  * `data-testid`
+ */
+declare const Box: React$1.ForwardRefExoticComponent<BoxProps & React$1.RefAttributes<HTMLDivElement>>;
 
 declare const Color: readonly ["primary", "secondary", "tertiary", "branded", "destructive-primary", "destructive-secondary", "destructive-tertiary", "success", "gray200", "gray700", "gray800", "gray900", "white", "inherit"];
 declare const Size: readonly ["sm", "md", "lg"];
 
-type ButtonType = {
+type ButtonProps = {
     /**
      * Test id for the button
      */
@@ -456,7 +459,7 @@ type ButtonType = {
 /**
  * [Button](https://cambly-syntax.vercel.app/?path=/docs/components-button--docs) is used to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.
  */
-declare const Button: React__default.ForwardRefExoticComponent<ButtonType & React__default.RefAttributes<HTMLButtonElement>>;
+declare const Button: React__default.ForwardRefExoticComponent<ButtonProps & React__default.RefAttributes<HTMLButtonElement>>;
 
 /**
  * [ButtonGroup](https://cambly-syntax.vercel.app/?path=/docs/components-buttongroup--docs) groups buttons in a row or column with consistent spacing between each button.
@@ -565,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.
@@ -573,7 +576,7 @@ declare const Heading: ({ align, as, children, color, size, }: {
      *
      * @defaultValue "start"
      */
-    align?: "center" | "end" | "start" | "forceLeft" | "forceRight" | undefined;
+    align?: "start" | "end" | "forceLeft" | "center" | "forceRight" | undefined;
     /**
      * DOM element to render as.
      *
@@ -589,7 +592,11 @@ declare const Heading: ({ align, as, children, color, size, }: {
      *
      * @defaultValue "gray900"
      */
-    color?: "gray200" | "gray900" | "gray700" | "gray800" | "white" | "primary" | "secondary" | "tertiary" | "destructive-primary" | "destructive-secondary" | "destructive-tertiary" | "branded" | "success" | "inherit" | undefined;
+    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.
      *
@@ -603,7 +610,7 @@ declare const Heading: ({ align, as, children, color, size, }: {
     size?: 500 | 600 | 700 | 800 | undefined;
 }) => ReactElement;
 
-type IconButtonType = {
+type IconButtonProps = {
     /**
      * The color of the button
      *
@@ -652,7 +659,7 @@ type IconButtonType = {
 /**
  * [IconButton](https://cambly-syntax.vercel.app/?path=/docs/components-iconbutton--docs) is a clickable element that is used to perform an action.
  */
-declare const IconButton: React__default.ForwardRefExoticComponent<IconButtonType & React__default.RefAttributes<HTMLButtonElement>>;
+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.
@@ -735,7 +742,40 @@ declare const sizeWidth: {
     readonly sm: 400;
     readonly lg: 600;
 };
-type ModalType = {
+/**
+ * [Modal](https://cambly-syntax.vercel.app/?path=/docs/components-modal--docs) is a dialog that appears on top of the main content and locks user interaction within the modal.
+ *
+ ```
+  const [showModal, setShowModal] = useState(false)
+
+  return (
+    <>
+      {showModal && <Modal
+        header="header text"
+        onDismiss={() => setShowModal(false)}
+        footer={
+          <>
+            <Button
+              text="Cancel"
+              color="secondary"
+              onClick={() => {}}
+            />
+            <Button
+              text="Confirm"
+              onClick={() => {}}
+            />
+          </>
+        }
+      >
+        <Typography>
+          Body text goes here!
+        </Typography>
+      </Modal> }
+    </>
+  )
+  ```
+ */
+declare function Modal({ header, children, image, onDismiss, footer, accessibilityCloseLabel, size, zIndex, "data-testid": dataTestId, }: {
     /**
      * The modal's main content. Should typically take in `Typography`'d text.
      */
@@ -803,41 +843,7 @@ type ModalType = {
      * Test id for the modal
      */
     "data-testid"?: string;
-};
-/**
- * [Modal](https://cambly-syntax.vercel.app/?path=/docs/components-modal--docs) is a dialog that appears on top of the main content and locks user interaction within the modal.
- *
- ```
-  const [showModal, setShowModal] = useState(false)
-
-  return (
-    <>
-      {showModal && <Modal
-        header="header text"
-        onDismiss={() => setShowModal(false)}
-        footer={
-          <>
-            <Button
-              text="Cancel"
-              color="secondary"
-              onClick={() => {}}
-            />
-            <Button
-              text="Confirm"
-              onClick={() => {}}
-            />
-          </>
-        }
-      >
-        <Typography>
-          Body text goes here!
-        </Typography>
-      </Modal> }
-    </>
-  )
-  ```
- */
-declare function Modal({ header, children, image, onDismiss, footer, accessibilityCloseLabel, size, zIndex, "data-testid": dataTestId, }: ModalType): ReactElement;
+}): ReactElement;
 declare namespace Modal {
     var displayName: string;
 }
@@ -1032,7 +1038,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.
@@ -1040,13 +1046,13 @@ declare const Typography: ({ align, as, children, color, inline, lineClamp, size
      *
      * @defaultValue "start"
      */
-    align?: "center" | "end" | "start" | "forceLeft" | "forceRight" | undefined;
+    align?: "start" | "end" | "forceLeft" | "center" | "forceRight" | undefined;
     /**
      * DOM element to render as.
      *
      * @defaultValue "div"
      */
-    as?: "div" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | undefined;
+    as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div" | undefined;
     /**
      * The text to be rendered
      */
@@ -1056,7 +1062,11 @@ declare const Typography: ({ align, as, children, color, inline, lineClamp, size
      *
      * @defaultValue "gray900"
      */
-    color?: "gray200" | "gray900" | "gray700" | "gray800" | "white" | "primary" | "secondary" | "tertiary" | "destructive-primary" | "destructive-secondary" | "destructive-tertiary" | "branded" | "success" | "inherit" | undefined;
+    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

@@ -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;