@cambly/syntax-core 9.0.2 → 9.1.1

package/dist/index.mjs

@@ -545,6 +545,16 @@ var loadingIconSize_default = loadingIconSize;
 // css-module:./Button.module.css#css-module
 var Button_module_default2 = { "button": "_button_1iunh_1", "buttonGap": "_buttonGap_1iunh_9", "fullWidth": "_fullWidth_1iunh_50", "sm": "_sm_1iunh_54", "md": "_md_1iunh_61", "lg": "_lg_1iunh_68", "icon": "_icon_1iunh_75", "smIcon": "_smIcon_1iunh_79", "mdIcon": "_mdIcon_1iunh_86", "lgIcon": "_lgIcon_1iunh_93", "secondaryBorder": "_secondaryBorder_1iunh_100", "secondaryDestructiveBorder": "_secondaryDestructiveBorder_1iunh_104", "loading": "_loading_1iunh_118", "syntaxButtonLoadingRotate": "_syntaxButtonLoadingRotate_1iunh_1", "loadingCircle": "_loadingCircle_1iunh_122" };
 
+// src/useIsHydrated.tsx
+import { useEffect, useState } from "react";
+function useIsHydrated() {
+  const [isHydrated, setIsHydrated] = useState(false);
+  useEffect(() => {
+    setIsHydrated(true);
+  }, []);
+  return isHydrated;
+}
+
 // src/Button/Button.tsx
 import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
 var Button = forwardRef2(
@@ -564,6 +574,7 @@ var Button = forwardRef2(
     tooltip,
     type = "button"
   }, ref) => {
+    const isHydrated = useIsHydrated();
     return /* @__PURE__ */ jsxs2(
       "button",
       {
@@ -572,7 +583,7 @@ var Button = forwardRef2(
         "aria-label": accessibilityLabel,
         type,
         title: tooltip,
-        disabled: disabled || loading,
+        disabled: !isHydrated || disabled || loading,
         onClick,
         className: (0, import_classnames4.default)(
           Button_module_default2.button,
@@ -678,10 +689,10 @@ function Card({
 
 // src/Checkbox/Checkbox.tsx
 var import_classnames6 = __toESM(require_classnames());
-import { useState as useState2 } from "react";
+import { useState as useState3 } from "react";
 
 // src/useFocusVisible.tsx
-import { useState, useEffect } from "react";
+import { useState as useState2, useEffect as useEffect2 } from "react";
 var hasSetupGlobalListeners = false;
 var currentModality = null;
 var changeHandlers = /* @__PURE__ */ new Set();
@@ -757,8 +768,8 @@ function setupGlobalFocusEvents() {
 }
 function useFocusVisible() {
   setupGlobalFocusEvents();
-  const [isFocusVisibleState, setFocusVisible] = useState(isFocusVisible());
-  useEffect(() => {
+  const [isFocusVisibleState, setFocusVisible] = useState2(isFocusVisible());
+  useEffect2(() => {
     const handler = () => {
       setFocusVisible(isFocusVisible());
     };
@@ -789,13 +800,15 @@ var iconWidth = {
 var Checkbox = ({
   checked = false,
   "data-testid": dataTestId,
-  disabled = false,
+  disabled: disabledProp = false,
   size = "md",
   label,
   error = false,
   onChange
 }) => {
-  const [isFocused, setIsFocused] = useState2(false);
+  const isHydrated = useIsHydrated();
+  const disabled = !isHydrated || disabledProp;
+  const [isFocused, setIsFocused] = useState3(false);
   const { isFocusVisible: isFocusVisible2 } = useFocusVisible();
   const checkboxStyling = (0, import_classnames6.default)(Checkbox_module_default.checkbox, Checkbox_module_default[size]);
   const uncheckedStyling = (0, import_classnames6.default)(checkboxStyling, Checkbox_module_default.uncheckedBox, {
@@ -866,7 +879,7 @@ var import_classnames7 = __toESM(require_classnames());
 import { forwardRef as forwardRef3 } from "react";
 
 // css-module:./Chip.module.css#css-module
-var Chip_module_default = { "chip": "_chip_1rwvt_1", "selectedChip": "_selectedChip_1rwvt_12", "icon": "_icon_1rwvt_17", "selectedIcon": "_selectedIcon_1rwvt_25", "sm": "_sm_1rwvt_29", "lg": "_lg_1rwvt_35" };
+var Chip_module_default = { "chip": "_chip_nvvgx_1", "disabled": "_disabled_nvvgx_12", "selectedChip": "_selectedChip_nvvgx_17", "icon": "_icon_nvvgx_22", "selectedIcon": "_selectedIcon_nvvgx_30", "sm": "_sm_nvvgx_34", "lg": "_lg_nvvgx_40" };
 
 // src/Chip/Chip.tsx
 import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
@@ -879,8 +892,11 @@ var Chip = forwardRef3(
     onChange,
     icon: Icon
   }, ref) => {
+    const isHydrated = useIsHydrated();
+    const disabled = !isHydrated;
     const chipStyles = (0, import_classnames7.default)(Chip_module_default.chip, Chip_module_default[size], {
-      [Chip_module_default.selectedChip]: selected
+      [Chip_module_default.selectedChip]: selected,
+      [Chip_module_default.disabled]: disabled
     });
     const iconStyles = (0, import_classnames7.default)(Chip_module_default.icon, {
       [Chip_module_default.selectedIcon]: selected
@@ -893,6 +909,7 @@ var Chip = forwardRef3(
       "button",
       {
         className: chipStyles,
+        disabled,
         "data-testid": dataTestId,
         ref,
         type: "button",
@@ -977,6 +994,7 @@ var IconButton = forwardRef4(
     tooltip,
     onClick
   }, ref) => {
+    const isHydrated = useIsHydrated();
     return /* @__PURE__ */ jsx12(
       "button",
       {
@@ -984,7 +1002,7 @@ var IconButton = forwardRef4(
         "data-testid": dataTestId,
         type: "button",
         title: tooltip,
-        disabled,
+        disabled: !isHydrated || disabled,
         onClick,
         className: (0, import_classnames8.default)(
           IconButton_module_default.iconButton,
@@ -1082,7 +1100,7 @@ var LinkButton_default = LinkButton;
 var import_classnames10 = __toESM(require_classnames());
 
 // src/Modal/FocusTrap.tsx
-import { useEffect as useEffect2, useRef } from "react";
+import { useEffect as useEffect3, useRef } from "react";
 import { jsx as jsx14 } from "react/jsx-runtime";
 function queryFocusableAll(el) {
   const selector = [
@@ -1114,7 +1132,7 @@ function FocusTrap({
 }) {
   const elRef = useRef(null);
   const previouslyFocusedElRef = useRef(null);
-  useEffect2(() => {
+  useEffect3(() => {
     const { current: element } = elRef;
     const focusFirstChild = () => {
       const withinIframe = window !== window.parent;
@@ -1148,9 +1166,9 @@ function FocusTrap({
 }
 
 // src/Modal/StopScroll.tsx
-import { useEffect as useEffect3 } from "react";
+import { useEffect as useEffect4 } from "react";
 function StopScroll(props) {
-  useEffect3(() => {
+  useEffect4(() => {
     const originalStyle = window.getComputedStyle(document.body).overflow;
     document.body.style.overflow = "hidden";
     return () => {
@@ -1272,7 +1290,7 @@ Modal.displayName = "Modal";
 
 // src/RadioButton/RadioButton.tsx
 var import_classnames11 = __toESM(require_classnames());
-import { useState as useState3 } from "react";
+import { useState as useState4 } from "react";
 
 // css-module:./RadioButton.module.css#css-module
 var RadioButton_module_default = { "radioBaseContainer": "_radioBaseContainer_6h2zg_1", "disabled": "_disabled_6h2zg_9", "cursorDisabled": "_cursorDisabled_6h2zg_13", "cursorEnabled": "_cursorEnabled_6h2zg_17", "smBase": "_smBase_6h2zg_21", "mdBase": "_mdBase_6h2zg_25", "radioStyleOverride": "_radioStyleOverride_6h2zg_29", "smOverride": "_smOverride_6h2zg_34", "mdOverride": "_mdOverride_6h2zg_39", "background": "_background_6h2zg_44", "sm": "_sm_6h2zg_21", "md": "_md_6h2zg_25", "neutralBorder": "_neutralBorder_6h2zg_61", "smCheckedBorder": "_smCheckedBorder_6h2zg_65", "mdCheckedBorder": "_mdCheckedBorder_6h2zg_69", "errorBorderColor": "_errorBorderColor_6h2zg_73", "borderColor": "_borderColor_6h2zg_77" };
@@ -1282,7 +1300,7 @@ import { jsx as jsx17, jsxs as jsxs7 } from "react/jsx-runtime";
 var RadioButton = ({
   checked = false,
   "data-testid": dataTestId,
-  disabled = false,
+  disabled: disabledProp = false,
   error = false,
   id,
   label,
@@ -1291,7 +1309,9 @@ var RadioButton = ({
   size = "md",
   value
 }) => {
-  const [isFocused, setIsFocused] = useState3(false);
+  const isHydrated = useIsHydrated();
+  const disabled = !isHydrated || disabledProp;
+  const [isFocused, setIsFocused] = useState4(false);
   const { isFocusVisible: isFocusVisible2 } = useFocusVisible();
   const sharedStyles = (0, import_classnames11.default)(RadioButton_module_default.background, RadioButton_module_default[size], {
     [RadioButton_module_default.errorBorderColor]: error,
@@ -1365,7 +1385,7 @@ var RadioButton_default = RadioButton;
 var import_classnames12 = __toESM(require_classnames());
 import {
   useId,
-  useState as useState4
+  useState as useState5
 } from "react";
 
 // ../syntax-design-tokens/dist/js/index.js
@@ -1395,7 +1415,7 @@ var iconSize3 = {
 function SelectList({
   children,
   "data-testid": dataTestId,
-  disabled = false,
+  disabled: disabledProp = false,
   errorText,
   helperText,
   id,
@@ -1407,9 +1427,11 @@ function SelectList({
   size = "md"
 }) {
   const reactId = useId();
+  const isHydrated = useIsHydrated();
+  const disabled = !isHydrated || disabledProp;
   const selectId = id != null ? id : reactId;
   const { isFocusVisible: isFocusVisible2 } = useFocusVisible();
-  const [isFocused, setIsFocused] = useState4(false);
+  const [isFocused, setIsFocused] = useState5(false);
   return /* @__PURE__ */ jsxs8(
     "div",
     {
@@ -1490,12 +1512,14 @@ var TapArea = forwardRef6(
     children,
     accessibilityLabel,
     "data-testid": dataTestId,
-    disabled = false,
+    disabled: disabledProp = false,
     fullWidth = true,
     onClick,
     rounding = "none",
     tabIndex = 0
   }, ref) => {
+    const isHydrated = useIsHydrated();
+    const disabled = !isHydrated || disabledProp;
     const handleClick = (event) => !disabled ? onClick(event) : void 0;
     const handleKeyDown = (event) => {
       if (disabled)
@@ -1544,7 +1568,7 @@ import { jsx as jsx21, jsxs as jsxs9 } from "react/jsx-runtime";
 function TextField({
   autoComplete,
   "data-testid": dataTestId,
-  disabled = false,
+  disabled: disabledProp = false,
   errorText = "",
   helperText = "",
   id,
@@ -1555,6 +1579,8 @@ function TextField({
   type = "text",
   value = ""
 }) {
+  const isHydrated = useIsHydrated();
+  const disabled = !isHydrated || disabledProp;
   const reactId = useId2();
   const inputId = id != null ? id : reactId;
   return /* @__PURE__ */ jsxs9(