@cambly/syntax-core 6.0.0 → 6.0.2

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import * as React$1 from 'react';
 import React__default, { ReactNode, AriaRole, ReactElement } from 'react';
 
 /**
- * Avatar is a circular image that represents a user.
+ * [Avatar](https://cambly-syntax.vercel.app/?path=/docs/components-avatar--docs) is a circular image that represents a user.
  */
 declare const Avatar: ({ src, accessibilityLabel, size, }: {
     /**
@@ -28,7 +28,7 @@ declare const Avatar: ({ src, accessibilityLabel, size, }: {
 }) => JSX.Element;
 
 /**
- * Badge is a component to display short text and give additional context to features and other components.
+ * [Badge](https://cambly-syntax.vercel.app/?path=/docs/components-badge--docs) is a component to display short text and give additional context to features and other components.
  */
 declare const Badge: ({ text, color, }: {
     /**
@@ -53,13 +53,13 @@ type JustifyContent = "start" | "end" | "center" | "between" | "around" | "evenl
 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 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.
+ * [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 _default: React$1.ForwardRefExoticComponent<{
+declare const Box: React$1.ForwardRefExoticComponent<{
     /**
      * The alignment of the box on the cross axis.
      *
@@ -447,10 +447,13 @@ type ButtonType = {
      */
     type?: "button" | "submit" | "reset";
 };
+/**
+ * [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>>;
 
 /**
- * Group buttons to render them in a row or column with consistent spacing between each button
+ * [ButtonGroup](https://cambly-syntax.vercel.app/?path=/docs/components-buttongroup--docs) groups buttons in a row or column with consistent spacing between each button.
  */
 declare const ButtonGroup: ({ orientation, size, children, }: {
     /**
@@ -476,9 +479,6 @@ declare const ButtonGroup: ({ orientation, size, children, }: {
 }) => ReactElement;
 
 declare const CardSizes: readonly ["sm", "lg"];
-/**
- * Card is a basic container component to apply consistent styling and render child components.
- */
 type CardType = {
     /**
      * Test id for the button
@@ -498,10 +498,13 @@ type CardType = {
      */
     size?: (typeof CardSizes)[number];
 };
-declare const Card: ({ children, size, "data-testid": dataTestId, }: CardType) => JSX.Element;
+/**
+ * [Card](https://cambly-syntax.vercel.app/?path=/docs/components-card--docs) is a basic container component to apply consistent styling and render child components.
+ */
+declare function Card({ children, size, "data-testid": dataTestId, }: CardType): JSX.Element;
 
 /**
- * Divider is a thin horizontal line to group content in lists and layouts.
+ * [Divider](https://cambly-syntax.vercel.app/?path=/docs/components-divider--docs) is a thin horizontal line to group content in lists and layouts.
  */
 declare function Divider(): React.ReactElement;
 declare namespace Divider {
@@ -509,7 +512,7 @@ declare namespace Divider {
 }
 
 /**
- * Heading enforces a consistent style & accessibility best practices for headings.
+ * [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, }: {
     /**
@@ -596,12 +599,12 @@ type IconButtonType = {
     tooltip?: string;
 };
 /**
- * IconButton is a clickable element that is used to perform an action.
+ * [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>>;
 
 /**
- * Checkbox is a clickable element that will show if an option has been selected or not
+ * [Checkbox](https://cambly-syntax.vercel.app/?path=/docs/components-checkbox--docs) is a clickable element that will show if an option has been selected or not.
  */
 declare const Checkbox: ({ checked, "data-testid": dataTestId, disabled, size, label, error, onChange, }: {
     /**
@@ -646,7 +649,7 @@ declare const Checkbox: ({ checked, "data-testid": dataTestId, disabled, size, l
 }) => ReactElement;
 
 /**
- * MiniActionCard is component that alerts users to a call to action.
+ * [MiniActionCard](https://cambly-syntax.vercel.app/?path=/docs/components-miniactioncard--docs) is component that alerts users to a call to action.
  */
 declare const MiniActionCard: ({ children, }: {
     /**
@@ -716,7 +719,7 @@ type ModalType = {
     "data-testid"?: string;
 };
 /**
- * Modal is a dialog that appears on top of the main content and locks user interaction within the modal.
+ * [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.
  */
 declare function Modal({ header, children, image, onDismiss, footer, accessibilityCloseLabel, size, zIndex, "data-testid": dataTestId, }: ModalType): ReactElement;
 declare namespace Modal {
@@ -724,7 +727,7 @@ declare namespace Modal {
 }
 
 /**
- * RadioButton is a radio button with accompanying text
+ * [RadioButton](https://cambly-syntax.vercel.app/?path=/docs/components-radiobutton--docs) is a radio button with accompanying text
  */
 declare const RadioButton: ({ checked, "data-testid": dataTestId, disabled, error, id, label, name, onChange, size, value, }: {
     /**
@@ -780,70 +783,73 @@ declare const RadioButton: ({ checked, "data-testid": dataTestId, disabled, erro
     value: string;
 }) => ReactElement;
 
-declare const SelectList: {
-    ({ children, "data-testid": dataTestId, disabled, errorText, helperText, label, onChange, onClick, placeholderText, selectedValue, size, }: {
-        /**
-         * One or more SelectList.Option components.
-         */
-        children: ReactNode;
-        /**
-         * Test id for the select element
-         */
-        "data-testid"?: string | undefined;
-        /**
-         * true if the select dropdown is disabled
-         * @defaultValue false
-         */
-        disabled?: boolean | undefined;
-        /**
-         * Callback to be called when select is clicked
-         */
-        onClick?: React__default.MouseEventHandler<HTMLSelectElement> | undefined;
-        /**
-         * Text shown below select box if there is an input error.
-         */
-        errorText?: string | undefined;
-        /**
-         * Text shown below select box
-         */
-        helperText?: string | undefined;
-        /**
-         * Text shown above select box
-         */
-        label: string;
-        /**
-         * The callback to be called when an option is selected
-         */
-        onChange: React__default.ChangeEventHandler<HTMLSelectElement>;
-        /**
-         * Text showing in select box if no option has been chosen.
-         * We should always have a placeholder unless there is a default option selected
-         */
-        placeholderText?: string | undefined;
-        /**
-         * Value of the currently selected option
-         */
-        selectedValue?: string | undefined;
-        /**
-         * Size of the select box
-         * * `sm`: 32px
-         * * `md`: 40px
-         * * `lg`: 48px
-         *
-         * @defaultValue "md"
-         */
-        size?: "sm" | "md" | "lg" | undefined;
-    }): ReactElement;
-    Option: ({ "data-testid": dataTestId, value, label, disabled, }: {
+/**
+ * [SelectList](https://cambly-syntax.vercel.app/?path=/docs/components-selectlist--docs) is a dropdown menu that allows users to select one option from a list.
+ */
+declare function SelectList({ children, "data-testid": dataTestId, disabled, errorText, helperText, label, onChange, onClick, placeholderText, selectedValue, size, }: {
+    /**
+     * One or more SelectList.Option components.
+     */
+    children: ReactNode;
+    /**
+     * Test id for the select element
+     */
+    "data-testid"?: string;
+    /**
+     * true if the select dropdown is disabled
+     * @defaultValue false
+     */
+    disabled?: boolean;
+    /**
+     * Callback to be called when select is clicked
+     */
+    onClick?: React__default.MouseEventHandler<HTMLSelectElement>;
+    /**
+     * Text shown below select box if there is an input error.
+     */
+    errorText?: string;
+    /**
+     * Text shown below select box
+     */
+    helperText?: string;
+    /**
+     * Text shown above select box
+     */
+    label: string;
+    /**
+     * The callback to be called when an option is selected
+     */
+    onChange: React__default.ChangeEventHandler<HTMLSelectElement>;
+    /**
+     * Text showing in select box if no option has been chosen.
+     * We should always have a placeholder unless there is a default option selected
+     */
+    placeholderText?: string;
+    /**
+     * Value of the currently selected option
+     */
+    selectedValue?: string;
+    /**
+     * Size of the select box
+     * * `sm`: 32px
+     * * `md`: 40px
+     * * `lg`: 48px
+     *
+     * @defaultValue "md"
+     */
+    size?: "sm" | "md" | "lg";
+}): ReactElement;
+declare namespace SelectList {
+    var Option: ({ "data-testid": dataTestId, value, label, disabled, }: {
         "data-testid"?: string | undefined;
         value: string;
         label: string;
         disabled?: boolean | undefined;
     }) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>>;
-};
+}
 
 /**
- * Typography is a component that renders text.
+ * [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, }: {
     /**
@@ -918,4 +924,4 @@ declare const Typography: ({ align, as, children, color, inline, lineClamp, size
     weight?: "regular" | "semiBold" | "bold" | "heavy" | undefined;
 }) => ReactElement;
 
-export { Avatar, Badge, _default as Box, Button, ButtonGroup, Card, Checkbox, Divider, Heading, IconButton, MiniActionCard, Modal, RadioButton, SelectList, Typography };
+export { Avatar, Badge, Box, Button, ButtonGroup, Card, Checkbox, Divider, Heading, IconButton, MiniActionCard, Modal, RadioButton, SelectList, Typography };

package/dist/index.js

@@ -118,7 +118,7 @@ __export(src_exports, {
   Box: () => Box_default,
   Button: () => Button_default,
   ButtonGroup: () => ButtonGroup_default,
-  Card: () => Card_default,
+  Card: () => Card,
   Checkbox: () => Checkbox_default,
   Divider: () => Divider,
   Heading: () => Heading_default,
@@ -126,7 +126,7 @@ __export(src_exports, {
   MiniActionCard: () => MiniActionCard_default,
   Modal: () => Modal,
   RadioButton: () => RadioButton_default,
-  SelectList: () => SelectList_default,
+  SelectList: () => SelectList,
   Typography: () => Typography_default
 });
 module.exports = __toCommonJS(src_exports);
@@ -235,7 +235,7 @@ var padding_module_default = { "paddingX0": "_paddingX0_1aqye_2", "paddingX1": "
 // src/Box/Box.tsx
 var import_react = require("react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var Box_default = (0, import_react.forwardRef)(function Box(props, ref) {
+var Box = (0, import_react.forwardRef)(function Box2(props, ref) {
   var _c;
   const _a = props, { as: BoxElement = "div", children } = _a, boxProps = __objRest(_a, ["as", "children"]);
   const _b = boxProps, {
@@ -421,6 +421,7 @@ var Box_default = (0, import_react.forwardRef)(function Box(props, ref) {
   }, {});
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(BoxElement, __spreadProps(__spreadValues(__spreadValues({}, parsedProps), passthroughProps), { ref, children }));
 });
+var Box_default = Box;
 
 // src/Badge/Badge.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
@@ -612,11 +613,11 @@ var ButtonGroup_default = ButtonGroup;
 
 // src/Card/Card.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
-var Card = ({
+function Card({
   children,
   size = "sm",
   "data-testid": dataTestId
-}) => {
+}) {
   const sizeWidth2 = {
     sm: 352,
     lg: 744
@@ -634,8 +635,7 @@ var Card = ({
       children
     }
   );
-};
-var Card_default = Card;
+}
 
 // css-module:./Divider.module.css#css-module
 var Divider_module_default = { "divider": "_divider_1ddgq_1" };
@@ -1216,7 +1216,7 @@ var iconSize3 = {
   md: 24,
   lg: 24
 };
-var SelectList = ({
+function SelectList({
   children,
   "data-testid": dataTestId,
   disabled = false,
@@ -1228,7 +1228,7 @@ var SelectList = ({
   placeholderText,
   selectedValue = "",
   size = "md"
-}) => {
+}) {
   const id = (0, import_react9.useId)();
   const { isFocusVisible: isFocusVisible2 } = useFocusVisible();
   const [isFocused, setIsFocused] = (0, import_react9.useState)(false);
@@ -1295,8 +1295,7 @@ var SelectList = ({
       ]
     }
   );
-};
-var SelectList_default = SelectList;
+}
 SelectList.Option = SelectOption_default;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {